Kinerja JavaScript di browser dapat dikatakan sebagai masalah kegunaan paling penting yang harus dihadapi pengembang front-end.
Di antara aturan yahoo yslow23, salah satunya adalah menempatkan js di bagian bawah. Alasannya adalah, pada kenyataannya, sebagian besar browser menggunakan satu proses untuk memproses banyak tugas seperti UI dan memperbarui JavaScript berjalan, dan hanya satu tugas yang dieksekusi pada saat yang sama. Berapa lama JavaScript berjalan, berapa lama waktu yang dibutuhkan untuk menunggu sebelum browser menganggur untuk merespons interaksi pengguna.
Dari perspektif dasar, ini berarti penampilan tag <script> menyebabkan seluruh halaman menunggu karena skrip yang dikurangi dan dijalankan. Terlepas dari apakah kode JavaScript yang sebenarnya dilengkapi atau terkandung dalam file eksternal yang tidak relevan, proses unduhan dan penguraian halaman harus dihentikan dan menunggu skrip untuk menyelesaikan pemrosesan ini sebelum melanjutkan. Ini adalah bagian penting dari siklus hidup halaman, karena skrip dapat memodifikasi konten halaman selama runtime. Contoh tipikal adalah fungsi dokumen.write (), misalnya:
Salinan kode adalah sebagai berikut:
<Html>
<head>
<Title> Contoh skrip </iteme>
</head>
<body>
<p>
<type skrip = "Teks/JavaScript">
document.write ("Tanggal adalah" + (tanggal baru ()). TodateString ());
</script>
</p>
</body>
</html>
Ketika browser menemukan tag <script>, seperti pada halaman HTML di atas, tidak mungkin untuk memprediksi apakah JavaScript menambahkan konten ke tag <p>. Oleh karena itu, browser berhenti, menjalankan kode JavaScript ini, dan kemudian terus menguraikan dan menerjemahkan halaman. Hal yang sama terjadi saat memuat JavaScript menggunakan properti SRC. Peramban harus terlebih dahulu mengunduh kode untuk file eksternal, yang membutuhkan waktu, dan kemudian menguraikan dan menjalankan kode ini. Selama proses ini, penguraian halaman dan interaksi pengguna sepenuhnya diblokir.
Karena skrip memblokir proses pengunduhan dari sumber daya halaman lain, metode yang disarankan adalah: Tempatkan semua tag <script> sedekat mungkin dengan bagian bawah tag <body> untuk meminimalkan dampak pada seluruh unduhan halaman. Misalnya:
Salinan kode adalah sebagai berikut:
<Html>
<head>
<Title> Contoh skrip </iteme>
<tautan rel = "stylesheet" type = "text/css" href = "styles.css">
</head>
<body>
<p> Halo dunia! </p>
<-Contoh posisi skrip yang disarankan->
<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>
Kode ini menunjukkan di mana tag <script> yang disarankan terletak di file html. Meskipun unduhan skrip diblokir antara satu sama lain, halaman telah diunduh dan ditampilkan di depan pengguna, dan kecepatan memasukkan halaman tidak akan tampak terlalu lambat. Inilah yang disebutkan di atas untuk menempatkan JS ke bawah.
Selain itu, Yahoo! Membuat "pegangan federal" untuk perpustakaan "Yahoo! Pengguna, Yui" perpustakaan, yang diimplementasikan melalui "Jaringan Pengiriman Konten (CDN) mereka. Situs web mana pun dapat menggunakan URL" pegangan federal "untuk menunjukkan file mana yang termasuk dalam paket file Yui. Misalnya, URL berikut berisi dua file:
Salinan kode adalah sebagai berikut:
<script type = "text/javascript" src = "http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js"> </script>
URL ini memanggil file Yahoo-min.js dan Event-Min.js di versi 2.7.0. File -file ini adalah dua file terpisah di server, tetapi ketika server menerima permintaan URL ini, kedua file tersebut akan digabungkan dan dikembalikan ke klien. Dengan cara ini, dua tag <script> tidak lagi diperlukan (satu file dimuat untuk setiap tag), dan satu tag <script> dapat memuatnya. Ini adalah cara terbaik untuk memasukkan beberapa javascript eksternal di halaman HTML.
Skrip noblocking
Di atas adalah cara terbaik untuk memuat beberapa skrip JavaScript dalam keadaan awal halaman. JavaScript cenderung memblokir proses pemrosesan browser tertentu, seperti permintaan HTTP dan refresh antarmuka, yang merupakan masalah kinerja paling signifikan yang dihadapi oleh pengembang. Menjaga file JavaScript singkat dan membatasi jumlah permintaan HTTP hanyalah langkah pertama untuk membuat aplikasi web yang responsif.
Tetapi seperti halaman web besar dengan banyak kode JS, menjaga kode sumber singkat tidak selalu merupakan pilihan terbaik. Jadi, skrip non-blocking muncul, yang kita butuhkan adalah secara bertahap menambahkan JavaScript ke halaman, yang tidak akan memblokir browser sampai batas tertentu.
Kunci untuk tidak memblokir skrip adalah memuat kode sumber JavaScript setelah halaman dimuat, yang berarti bahwa pengunduhan kode dimulai setelah acara pemuatan jendela dikeluarkan.
Penjelasan Terkait:
Peristiwa pemuatan jendela hanya akan ditembakkan sekali dan hanya sekali setelah halaman dimuat.
window.onload = function () {} Harus menunggu semua konten di halaman web memuat (termasuk semua file elemen terkait, seperti gambar) untuk dieksekusi, yaitu, JavaScript dapat mengakses elemen apa pun di halaman saat ini.
Metode berikut adalah:
Skrip yang ditangguhkan skrip yang ditangguhkan
HTML4 mendefinisikan atribut yang diperluas untuk tag <script>: tundukan.
Atribut tunduk ini menunjukkan bahwa skrip yang terkandung dalam elemen tidak bermaksud untuk memodifikasi DOM, sehingga kode dapat dieksekusi nanti. Atribut Defer hanya didukung oleh Internet Explorer 4+ dan Firefox 3.5+, dan ini bukan solusi lintas-browser yang ideal. Di browser lain, atribut Defer akan diabaikan. Oleh karena itu, tag <script> akan diproses dengan cara default normal, yang berarti akan menyebabkan penyumbatan. Jika didukung oleh berbagai browser arus utama, ini masih merupakan solusi yang efektif.
Salinan kode adalah sebagai berikut:
<script type = "text/javascript" src = "file1.js" Defer> </ptript>
Tag <script> dengan atribut tundukan dapat ditempatkan di mana saja dalam dokumen, dan itu memulai unduhan saat diuraikan sampai DOM memuat (sebelum pegangan acara Onload dipanggil). Ketika file JavaScript DISFER diunduh, itu tidak memblokir proses pemrosesan lain di browser, sehingga file -file ini dapat diunduh secara paralel dengan sumber daya lain.
Anda dapat menggunakan kode berikut untuk menguji apakah browser mendukung atribut tundukan:
Salinan kode adalah sebagai berikut:
<Html>
<head>
<title> skrip tundukan contoh </iteme>
</head>
<body>
<Script Dist> Alert ("Defer"); </script>
<script> alert ("Script"); </script>
<script> window.onload = function () {alert ("load");}; </script>
</body>
</html>
Jika browser tidak mendukung penundaan, urutan kotak dialog pop-up adalah "tunduk", "skrip", dan "muat".
Jika browser mendukung tunduk, urutan kotak dialog pop-up adalah "skrip", "muat", "tunduk".
Elemen skrip dinamis
DOM memungkinkan kami untuk secara dinamis membuat hampir semua konten dokumen HTML menggunakan JavaScript, dan elemen <script> baru dapat dibuat dengan sangat mudah melalui DOM standar:
Salinan kode adalah sebagai berikut:
1 var skrip = document.createElement ("Script");
2 script.type = "Teks/JavaScript";
3 skrip.src = "file1.js";
4 Document.Body.AppendChild (skrip);
Elemen <script> baru memuat file sumber file1.js. Unduh file ini segera setelah elemen ditambahkan ke halaman. Poin kunci dari teknologi ini adalah bahwa di mana pun unduhan dimulai, unduhan dan menjalankan file tidak akan memblokir pemrosesan halaman lain.
Ketika sebuah file diunduh menggunakan node skrip dinamis, kode yang dikembalikan biasanya dieksekusi segera (kecuali Firefox dan Opera, yang akan menunggu semua node skrip dinamis sebelumnya dieksekusi).
Dalam kebanyakan kasus, kami berharap dapat memanggil fungsi untuk mengimplementasikan unduhan dinamis file JavaScript. Enkapsulasi fungsi berikut mengimplementasikan implementasi standar dan implementasi IE:
Salinan kode adalah sebagai berikut:
function loadscript (url, callback) {
var skrip = document.createElement ("Script");
script.type = "Teks/JavaScript";
if (script.readystate) {// yaitu
Script.onReadyStateChange = function () {
if (script.readystate == "dimuat" || script.readystate == "complete") {
script.onreadystatechange = null;
callback ();
}
};
}
lain {// orang lain
script.onload = function () {callback ();
};
}
script.src = url;
document.getElementsbyTagname ("head") [0] .AppendChild (skrip);
}
LoadScript ("File1.js", function () {// Call
peringatan ("File dimuat!");
});
Fungsi ini menerima dua parameter: URL dari file JavaScript dan fungsi panggilan balik yang dipicu saat penerimaan JavaScript selesai. Pemeriksaan atribut digunakan untuk menentukan peristiwa mana yang akan dipantau. Langkah terakhir adalah atribut SRC dan menambahkan file JavaScript ke kepala.
Pemuatan skrip dinamis adalah pola yang paling umum digunakan dalam unduhan JavaScript non-blocking karena dapat menjadi cross-browser dan mudah digunakan.
XMLHTTPREQREQUEST Injeksi Skrip XHR Injeksi skrip
Cara lain untuk mendapatkan skrip dengan cara yang tidak memblokir adalah dengan menyuntikkan skrip ke dalam halaman menggunakan objek XMLHTTPREQUEST (XHR). Teknik ini pertama kali membuat objek XHR, kemudian mengunduh file JavaScript, dan kemudian menyuntikkan kode JavaScript ke dalam halaman dengan elemen <script> dinamis. Lihatlah demo:
Salinan kode adalah sebagai berikut:
var xhr = xmlhttpRequest baru ();
xhr.open ("get", "file1.js", true);
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
if (xhr.status> = 200 && xhr.status <300 || xhr.status == 304) {// periksa kode status http
var skrip = document.createElement ("Script");
script.type = "Teks/JavaScript";
script.text = xhr.Responsetext;
document.body.appendChild (skrip);
}
}
};
xhr.send (null);
Kode ini mengirimkan permintaan file ke server untuk mendapatkan file1.js. OnReadyStateChange Event Handler memeriksa apakah ReadyState adalah 4, dan kemudian memeriksa apakah kode status HTTP valid (200 berarti mengonfirmasi bahwa permintaan klien telah berhasil, 2xx berarti respons yang valid, dan 304 berarti respons yang di -cache). Jika respons yang valid diterima, elemen <script> baru dibuat dan atribut teksnya diatur ke string responseText yang diterima dari server. Melakukan hal itu benar -benar akan membuat elemen <script> dengan kode inline, dan begitu elemen <script> baru ditambahkan ke dokumen, kode akan dieksekusi dan siap digunakan.
Keuntungan dari metode ini adalah memiliki kompatibilitas yang baik dan Anda dapat mengunduh kode JavaScript yang tidak segera dieksekusi. Karena kode kembali di luar tag <script>, itu tidak akan dieksekusi secara otomatis setelah mengunduh, yang memungkinkan Anda untuk menunda eksekusi.
Penentuan metode ini tunduk pada pembatasan homolog browser. File JavaScript harus ditempatkan di domain yang sama dengan halaman dan tidak dapat diunduh dari CDN (jaringan pengiriman konten). Untuk alasan ini, halaman web besar biasanya tidak menggunakan teknologi injeksi skrip XHR.
Pola Noblocking yang Direkomendasikan Pola Noblocking Direkomendasikan
Metode yang disarankan untuk memuat sejumlah besar javascript ke halaman dibagi menjadi dua langkah:
Langkah pertama termasuk kode yang diperlukan untuk memuat JavaScript secara dinamis, dan kemudian memuat bagian kecuali JavaScript yang diperlukan untuk inisialisasi halaman. Bagian kode ini sekecil mungkin dan hanya dapat menyertakan fungsi LoadScript (). Mengunduh dan berjalan dengan sangat cepat dan tidak akan menyebabkan banyak gangguan pada halaman.
Langkah kedua adalah menggunakannya untuk memuat sisa JavaScript setelah kode awal siap.
Misalnya:
Salinan kode adalah sebagai berikut:
1 <type skrip = "Teks/JavaScript" src = "loader.js">
2 </script> <script type = "text/javascript">
3 LoadScript ("The-Rest.js", function () {
4 application.init ();
5});
6
7 </script>
Tempatkan kode ini di depan tag dekat tubuh </body>. Manfaat melakukan ini adalah bahwa pertama, ini memastikan bahwa JavaScript berjalan tanpa mempengaruhi bagian lain dari halaman lain untuk ditampilkan. Kedua, ketika bagian kedua dari file JavaScript diunduh, semua DOM yang diperlukan untuk aplikasi telah dibuat dan siap diakses, menghindari penggunaan pemrosesan acara tambahan (seperti Window.onload) untuk mengetahui apakah halaman tersebut siap.
Opsi lain adalah menanamkan fungsi LoadScript () langsung ke halaman, yang dapat mengurangi overhead permintaan HTTP. Misalnya:
Salinan kode adalah sebagai berikut:
1 <script type = "text/javascript">
function loadscript (url, callback) {
var skrip = document.createElement ("Script");
script.type = "Teks/JavaScript";
if (script.readystate) {// yaitu skrip.onReadyStateChange = function () {
if (script.readystate == "dimuat" || script.readystate == "complete") {
script.onreadystatechange = null;
callback ();
}
};
} else {// orang lain
script.onload = function () {
callback ();
};
}
script.src = url;
document.getElementsbyTagname ("head") [0] .AppendChild (skrip);
}
LoadScript ("The-Rest.js", function () {
Application.init ();
});
</script>
Setelah kode inisialisasi halaman diunduh, Anda juga dapat menggunakan fungsi LoadScript () untuk memuat fungsi fungsional tambahan yang diperlukan oleh halaman.
Memperkenalkan alat umum, Ryan Grove dari Yahoo! Pencarian Membuat Perpustakaan Lazyload (lihat: http://github.com/rgrove/lazyload/). Lazyload adalah fungsi loadscript () yang kuat. Lazyload hanya memiliki sekitar 1,5kb setelah penskalaan. Contoh penggunaan adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<type skrip = "Text/JavaScript" src = "Lazyload-min.js"> </script>
<type skrip = "Teks/JavaScript">
LazyLoad.js ("The-Rest.js", function () {
Application.init ();
});
</script>
Ringkasan
1. Tempatkan semua tag <script> di bagian bawah halaman, dekat dengan tag tutup </body>. Metode ini memastikan bahwa halaman diuraikan sebelum skrip dijalankan.
2. Kemas skrip dalam grup. Semakin sedikit <script> tag pada halaman, semakin cepat halaman akan memuat dan merespons lebih cepat. Ini berlaku untuk file skrip eksternal dan kode inline.
3. Ada beberapa cara untuk mengunduh JavaScript menggunakan metode non-blocking:
1). Tambahkan atribut tundukan ke tag <script>
2). Buat elemen <script> secara dinamis, gunakan untuk mengunduh dan menjalankan kode
3). Gunakan objek XHR untuk mengunduh kode dan menyuntikkannya ke halaman
Melalui strategi di atas, kinerja aktual netizen yang menggunakan kode JavaScript dapat sangat ditingkatkan.
Buku Referensi "JavaScript High Performance".