Topik pengoptimuman JavaScript: Memuatkan dan Melaksanakan kemahiran memuatkan dan running

Topik pengoptimuman JavaScript: Memuatkan dan Melaksanakan kemahiran memuatkan dan running_javascript

WBOY

Lepaskan： 2016-05-16 15:19:10

asal

1042 orang telah melayarinya

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 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>

Salin selepas log masuk

Apabila penyemak imbas menemui teg seperti dalam halaman HTML di atas, adalah mustahil untuk meramalkan sama ada JavaScript akan menambah kandungan dalam teg

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 boleh diletakkan dalam teg atau Secara tradisinya, teg digunakan untuk memuatkan fail JavaScript luaran. Selain kod tersebut, bahagian juga mengandungi teg 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>

Salin selepas log masuk

Walaupun kod ini kelihatan tidak berbahaya, ia mempunyai isu prestasi: tiga fail JavaScript dimuatkan dalam bahagian Oleh kerana setiap teg 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 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 memuat turun sumber luaran, ia tidak perlu menyekat teg 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 hampir ke bahagian bawah teg 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>

Salin selepas log masuk

Kod ini menunjukkan lokasi teg 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.