Rumah > Artikel > hujung hadapan web > Topik pengoptimuman JavaScript: Memuatkan dan Melaksanakan kemahiran memuatkan dan running_javascript

Topik pengoptimuman JavaScript: Memuatkan dan Melaksanakan kemahiran memuatkan dan running_javascript

WBOYasal: 2016-05-16 15:19:101003semak imbas

Prestasi JavaScript dalam penyemak imbas boleh dianggap sebagai isu kebolehgunaan paling penting yang dihadapi oleh pembangun. Masalah ini ditambah lagi dengan sifat menyekat JavaScript, yang bermaksud perkara lain tidak boleh diproses oleh penyemak imbas semasa JavaScript sedang berjalan. Malah, kebanyakan penyemak imbas menggunakan satu proses untuk mengendalikan berbilang tugas seperti kemas kini UI dan JavaScript berjalan, dan hanya satu tugas boleh dilaksanakan pada masa yang sama.

Berapa lama JavaScript berjalan, kemudian berapa lama ia menunggu sebelum penyemak imbas melahu untuk membalas input pengguna.

Pada peringkat asas, ini bermakna kehadiran teg 855348821b2e8f2cc4b633bf98f064df menyebabkan seluruh halaman menunggu skrip dihuraikan dan dijalankan. Tidak kira sama ada kod JavaScript sebenar adalah sebaris atau terkandung dalam fail luaran yang tidak berkaitan, proses muat turun dan penghuraian halaman mesti berhenti dan menunggu skrip menyelesaikan pemprosesan ini sebelum meneruskan. Ini adalah bahagian penting dalam kitaran hayat halaman, kerana skrip boleh mengubah suai kandungan halaman semasa berjalan.

Contoh biasa ialah fungsi document.write(), contohnya:

<html>

<head>

<title>Script Example</title>

</head>

<body>

<p>

<script type=”text/javascript”>

document.write(“The date is ” + (new Date()).toDateString());

</script>

</p>

</body>

</html>

Apabila penyemak imbas menemui teg 855348821b2e8f2cc4b633bf98f064df seperti dalam halaman HTML di atas, adalah mustahil untuk meramalkan sama ada JavaScript akan menambah kandungan dalam teg e388a4556c0f65e1904146cc1a846bee Oleh itu, penyemak imbas berhenti, menjalankan kod JavaScript ini, dan kemudian meneruskan menghuraikan dan menterjemah halaman. Perkara yang sama berlaku apabila memuatkan JavaScript menggunakan atribut src. Penyemak imbas mesti memuat turun kod untuk fail luaran terlebih dahulu, yang mengambil sedikit masa, dan kemudian menghuraikan dan menjalankan kod ini. Semasa proses ini, penghuraian halaman dan interaksi pengguna disekat sepenuhnya.

Dokumentasi HTML 4 menyatakan bahawa teg 855348821b2e8f2cc4b633bf98f064df boleh diletakkan dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e atau 6c04bd5ca3fcae76e30b72ad730ca86d Secara tradisinya, teg 855348821b2e8f2cc4b633bf98f064df digunakan untuk memuatkan fail JavaScript luaran. Selain kod tersebut, bahagian 93f0f5c25f18dab9d176bd4f6de5d30e juga mengandungi teg 2cdf5bf648cf2f33323966d7f58a7f3f untuk memuatkan fail CSS luaran dan perisian tengah halaman lain. Maksudnya, adalah lebih baik untuk meletakkan bahagian yang bergantung pada gaya dan tingkah laku bersama-sama dan memuatkannya terlebih dahulu supaya halaman itu boleh mendapatkan rupa dan tingkah laku yang betul. Contohnya:

<html>

<head>

<title>Script Example</title>

<– Example of inefficient script positioning –>

<script type=”text/javascript” src=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

Walaupun kod ini kelihatan tidak berbahaya, ia mempunyai isu prestasi: tiga fail JavaScript dimuatkan dalam bahagian 93f0f5c25f18dab9d176bd4f6de5d30e Oleh kerana setiap teg 855348821b2e8f2cc4b633bf98f064df menyekat proses penghuraian halaman, pemprosesan halaman tidak boleh diteruskan sehingga ia telah memuat turun sepenuhnya dan menjalankan kod JavaScript luaran. Pengguna mesti bertolak ansur dengan kelewatan yang dirasakan ini.

Ingat bahawa penyemak imbas tidak akan memaparkan mana-mana bahagian halaman sehingga ia menemui teg 6c04bd5ca3fcae76e30b72ad730ca86d Meletakkan skrip di bahagian atas halaman dengan cara ini akan menyebabkan kelewatan yang ketara, yang biasanya menunjukkan dirinya sebagai: apabila halaman dibuka, ia mula-mula memaparkan halaman kosong dan pengguna tidak boleh membaca mahupun berinteraksi dengan halaman tersebut

Internet Explorer 8, Firefox 3.5, Safari 4 dan Chrome 2 membenarkan muat turun selari fail JavaScript. Berita baik ini bermakna apabila teg 855348821b2e8f2cc4b633bf98f064df memuat turun sumber luaran, ia tidak perlu menyekat teg 855348821b2e8f2cc4b633bf98f064df Malangnya, muat turun JavaScript masih menyekat proses muat turun sumber lain Walaupun proses muat turun antara skrip tidak menyekat satu sama lain, halaman masih perlu menunggu semua kod JavaScript dimuat turun dan dilaksanakan sebelum ia boleh diteruskan. Jadi, sementara penyemak imbas meningkatkan prestasi dengan membenarkan muat turun selari, masalah itu tidak dapat diselesaikan sepenuhnya dan penyekatan skrip masih menjadi isu.

Oleh kerana skrip menyekat proses muat turun sumber halaman lain, pendekatan yang disyorkan ialah meletakkan semua 855348821b2e8f2cc4b633bf98f064df hampir ke bahagian bawah teg 6c04bd5ca3fcae76e30b72ad730ca86d muka surat. Contohnya:

<html>

<head>

<title>Script Example</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

<– Example of recommended script positioning –>

<script type=”text/javascript” src=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

</body>

</html>

Kod ini menunjukkan lokasi teg 855348821b2e8f2cc4b633bf98f064df yang disyorkan dalam fail HTML. Walaupun muat turun skrip menyekat satu sama lain, halaman telah dimuat turun dan dipaparkan di hadapan pengguna, dan kelajuan memasuki halaman tidak akan kelihatan terlalu perlahan.

Di atas ialah pengenalan yang berkaitan dengan Memuatkan dan Pelaksanaan memuatkan dan menjalankan dalam kandungan pengoptimuman JavaScript. Saya harap ia akan membantu pembelajaran semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Pembelajaran modul AngularJS Anchor Scroll_AngularJSArtikel seterusnya：Pembelajaran modul AngularJS Anchor Scroll_AngularJS

Artikel berkaitan

Lihat lagi