Pengantar
Dalam artikel ini, saya akan mengajarkan cara memuat beberapa JavaScript di browser dan menjalankannya.
Tidak, tunggu, kembali! Saya tahu ini terdengar biasa dan sederhana, tetapi ingat, hal ini terjadi di browser tempat hal yang secara teoritis sederhana menjadi lubang keanehan yang didorong oleh warisan. Dengan mengetahui keanehan ini, Anda dapat memilih cara tercepat dan paling tidak mengganggu untuk memuat skrip. Jika Anda memiliki jadwal yang padat, lanjutkan ke referensi cepat.
Sebagai permulaan, berikut adalah cara spesifikasi menentukan berbagai cara skrip dapat didownload dan dieksekusi:

Seperti semua spesifikasi WHATWG, awalnya terlihat seperti dampak dari bom cluster di pabrik scrabble, tetapi setelah Anda membacanya untuk ke-5 kalinya dan menyeka darah dari mata Anda, sebenarnya cukup menarik:
Skrip pertama saya mencakup
<script src="//other-domain.com/1.js"></script>
<script src="2.js"></script>
Ahh, betapa indahnya kesederhanaan. Di sini, browser akan mendownload kedua skrip secara paralel dan menjalankannya sesegera mungkin, dengan mempertahankan urutannya. “2.js” tidak akan dieksekusi hingga “1.js” dieksekusi (atau gagal melakukannya), “1.js” tidak akan dieksekusi hingga skrip atau stylesheet sebelumnya dieksekusi, dll.
Sayangnya, browser memblokir rendering halaman lebih lanjut saat semua ini terjadi. Hal ini disebabkan oleh DOM API dari “zaman pertama web” yang memungkinkan string ditambahkan ke konten yang diproses parser, seperti document.write
. Browser yang lebih baru akan terus memindai atau mengurai dokumen di latar belakang dan memicu download untuk konten eksternal yang mungkin diperlukan (js, gambar, css, dll.), tetapi rendering masih diblokir.
Itulah sebabnya para pakar performa merekomendasikan untuk menempatkan elemen skrip di akhir dokumen, karena elemen tersebut memblokir konten sesedikit mungkin. Sayangnya, hal ini berarti skrip Anda tidak akan terlihat oleh browser hingga mendownload semua HTML, dan pada saat itu browser akan mulai mendownload konten lain, seperti CSS, gambar, dan iframe. Browser modern cukup cerdas untuk memprioritaskan JavaScript daripada gambar, tetapi kita dapat melakukannya dengan lebih baik.
Terima kasih IE! (tidak, saya tidak sedang menyindir)
<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>
Microsoft menyadari masalah performa ini dan memperkenalkan “tunda” ke Internet Explorer 4. Ini pada dasarnya mengatakan “Saya berjanji tidak akan memasukkan sesuatu ke dalam parser menggunakan hal-hal seperti document.write
. Jika saya melanggar janji tersebut, Anda bebas menghukum saya dengan cara apa pun yang Anda rasa sesuai”. Atribut ini masuk ke HTML4 dan muncul di browser lain.
Pada contoh di atas, browser akan mendownload kedua skrip secara paralel dan mengeksekusinya tepat sebelum DOMContentLoaded
diaktifkan, dengan mempertahankan urutannya.
Seperti bom cluster di pabrik domba, “menunda” menjadi berantakan. Antara atribut “src” dan “defer”, serta tag skrip vs skrip yang ditambahkan secara dinamis, kami memiliki 6 pola penambahan skrip. Tentu saja, browser tidak menyetujui urutan yang harus dieksekusi. Mozilla menulis artikel yang bagus tentang masalah ini pada tahun 2009.
WHATWG membuat perilaku ini eksplisit, dengan mendeklarasikan “defer” agar tidak memengaruhi skrip yang ditambahkan secara dinamis, atau tidak memiliki “src”. Jika tidak, skrip yang ditangguhkan harus berjalan setelah dokumen diuraikan, sesuai urutan penambahannya.
Terima kasih IE! (oke, sekarang saya sedang menyindir)
Ada yang memberi, ada yang mengambil. Sayangnya, ada bug yang tidak menyenangkan di IE4-9 yang dapat menyebabkan skrip dieksekusi dalam urutan yang tidak terduga. Berikut yang terjadi:
1.js
console.log('1');
document.getElementsByTagName('p')[0].innerHTML = 'Changing some content';
console.log('2');
2.js
console.log('3');
Dengan asumsi ada paragraf di halaman, urutan log yang diharapkan adalah [1, 2, 3], meskipun di IE9 dan yang lebih lama, Anda akan mendapatkan [1, 3, 2]. Operasi DOM tertentu menyebabkan IE menjeda eksekusi skrip saat ini dan menjalankan skrip lain yang tertunda sebelum melanjutkan.
Namun, meskipun dalam implementasi yang tidak mengalami bug, seperti IE10 dan browser lainnya, eksekusi skrip akan tertunda hingga seluruh dokumen didownload dan diuraikan. Hal ini dapat memudahkan jika Anda akan menunggu DOMContentLoaded
, tetapi jika Anda ingin benar-benar agresif dengan performa, Anda dapat mulai menambahkan pemroses dan melakukan bootstrap lebih cepat…
HTML5 datang untuk menyelamatkan
<script src="//other-domain.com/1.js" async></script>
<script src="2.js" async></script>
HTML5 memberi kita atribut baru, “async”, yang mengasumsikan bahwa Anda tidak akan menggunakan document.write
, tetapi tidak menunggu hingga dokumen diuraikan untuk dieksekusi. Browser akan mendownload kedua skrip secara paralel dan mengeksekusinya sesegera mungkin.
Sayangnya, karena akan dieksekusi sesegera mungkin, “2.js” dapat dieksekusi sebelum “1.js”. Hal ini tidak masalah jika keduanya independen, mungkin “1.js” adalah skrip pelacakan yang tidak ada hubungannya dengan “2.js”. Namun, jika “1.js” adalah salinan CDN jQuery yang menjadi dependensi “2.js”, halaman Anda akan dipenuhi error, seperti bom cluster di… Entahlah… Saya tidak punya analogi untuk ini.
Aku tahu yang kita butuhkan, library JavaScript.
Tujuan utamanya adalah memiliki kumpulan skrip yang langsung didownload tanpa memblokir rendering dan dieksekusi sesegera mungkin sesuai urutan penambahannya. Sayangnya, HTML tidak menyukai Anda dan tidak mengizinkan Anda melakukannya.
Masalah ini ditangani oleh JavaScript dalam beberapa ragam. Beberapa mengharuskan Anda membuat perubahan pada JavaScript, dengan menggabungkannya dalam callback yang dipanggil library dalam urutan yang benar (misalnya RequireJS). Yang lain akan menggunakan XHR untuk mendownload secara paralel, lalu eval()
dalam urutan yang benar, yang tidak berfungsi untuk skrip di domain lain kecuali jika memiliki header CORS dan browser mendukungnya. Beberapa bahkan menggunakan hack super-ajaib, seperti LabJS.
Hack ini melibatkan penipuan browser agar mendownload resource dengan cara yang akan memicu peristiwa saat selesai, tetapi menghindari eksekusi. Di LabJS, skrip akan ditambahkan dengan jenis mime yang salah, misalnya <script type="script/cache" src="...">
. Setelah semua skrip didownload, skrip tersebut akan ditambahkan lagi dengan jenis yang benar, dengan harapan browser akan langsung mengambilnya dari cache dan segera mengeksekusinya secara berurutan. Hal ini bergantung pada perilaku yang praktis tetapi tidak ditentukan dan rusak saat HTML5 mendeklarasikan bahwa browser tidak boleh mendownload skrip dengan jenis yang tidak dikenal. Perlu diperhatikan bahwa LabJS beradaptasi dengan perubahan ini dan sekarang menggunakan kombinasi metode dalam artikel ini.
Namun, pemuat skrip memiliki masalah performa tersendiri. Anda harus menunggu JavaScript library didownload dan diuraikan sebelum skrip apa pun yang dikelolanya dapat mulai didownload. Selain itu, bagaimana kita akan memuat loader skrip? Bagaimana kita akan memuat skrip yang memberi tahu pemuat skrip apa yang harus dimuat? Siapa yang mengawasi Watchmen? Mengapa saya telanjang? Semua pertanyaan ini sulit.
Pada dasarnya, jika Anda harus mendownload file skrip tambahan sebelum memikirkan untuk mendownload skrip lain, Anda telah kalah dalam pertempuran performa.
DOM untuk menyelamatkan
Jawabannya sebenarnya ada dalam spesifikasi HTML5, meskipun tersembunyi di bagian bawah bagian pemuatan skrip.
Mari kita terjemahkan menjadi “Manusia Bumi”:
[
'//other-domain.com/1.js',
'2.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
document.head.appendChild(script);
});
Skrip yang dibuat dan ditambahkan secara dinamis ke dokumen bersifat asinkron secara default, sehingga tidak memblokir rendering dan dieksekusi segera setelah didownload, yang berarti skrip tersebut dapat muncul dalam urutan yang salah. Namun, kita dapat menandainya secara eksplisit sebagai tidak asinkron:
[
'//other-domain.com/1.js',
'2.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
Hal ini memberi skrip kita campuran perilaku yang tidak dapat dicapai dengan HTML biasa. Dengan secara eksplisit tidak asinkron, skrip ditambahkan ke antrean eksekusi, antrean yang sama dengan yang ditambahkan dalam contoh HTML biasa pertama kita. Namun, karena dibuat secara dinamis, skrip tersebut dieksekusi di luar penguraian dokumen, sehingga rendering tidak diblokir saat didownload (jangan sampai salah mengartikan pemuatan skrip non-asinkron dengan XHR sinkron, yang tidak pernah baik).
Skrip di atas harus disertakan secara inline di header halaman, mengantrekan download skrip sesegera mungkin tanpa mengganggu rendering progresif, dan dieksekusi sesegera mungkin sesuai urutan yang Anda tentukan. “2.js” dapat didownload secara gratis sebelum “1.js”, tetapi tidak akan dieksekusi hingga “1.js” berhasil didownload dan dieksekusi, atau gagal melakukannya. Hore! download asinkron, tetapi eksekusi teratur.
Memuat skrip dengan cara ini didukung oleh semua yang mendukung atribut asinkron, dengan pengecualian Safari 5.0 (5.1 tidak masalah). Selain itu, semua versi Firefox dan Opera didukung karena versi yang tidak mendukung atribut asinkron akan mengeksekusi skrip yang ditambahkan secara dinamis sesuai urutan penambahannya ke dokumen.
Itu adalah cara tercepat untuk memuat skrip, bukan? Oke.
Jika Anda secara dinamis menentukan skrip mana yang akan dimuat, ya, jika tidak, mungkin tidak. Dengan contoh di atas, browser harus mengurai dan mengeksekusi skrip untuk menemukan skrip yang akan didownload. Tindakan ini akan menyembunyikan skrip Anda dari pemindai pramuat. Browser menggunakan pemindai ini untuk menemukan resource di halaman yang kemungkinan akan Anda kunjungi berikutnya, atau menemukan resource halaman saat parser diblokir oleh resource lain.
Kita dapat menambahkan visibilitas kembali dengan menempatkannya di header dokumen:
<link rel="subresource" href="//other-domain.com/1.js">
<link rel="subresource" href="2.js">
Hal ini memberi tahu browser bahwa halaman memerlukan 1.js dan 2.js. link[rel=subresource]
mirip dengan link[rel=prefetch]
, tetapi dengan semantik yang berbeda. Sayangnya, saat ini hanya didukung di Chrome, dan Anda harus mendeklarasikan skrip yang akan dimuat dua kali, sekali melalui elemen link, dan sekali lagi dalam skrip Anda.
Koreksi: Awalnya saya menyatakan bahwa ini diambil oleh pemindai pramuat, tetapi tidak, ini diambil oleh parser reguler. Namun, pemindai pramuat dapat mengambilnya, tetapi belum melakukannya, sedangkan skrip yang disertakan oleh kode yang dapat dieksekusi tidak pernah dapat dipramuat. Terima kasih kepada Yoav Weiss yang mengoreksi saya di kolom komentar.
Saya merasa artikel ini menyedihkan
Situasinya menyedihkan dan Anda pasti merasa tertekan. Tidak ada cara deklaratif yang tidak berulang untuk mendownload skrip dengan cepat dan asinkron sambil mengontrol urutan eksekusi. Dengan HTTP2/SPDY, Anda dapat mengurangi overhead permintaan hingga titik pengiriman skrip dalam beberapa file kecil yang dapat di-cache secara terpisah menjadi cara tercepat. Mendorong imajinasi:
<script src="dependencies.js"></script>
<script src="enhancement-1.js"></script>
<script src="enhancement-2.js"></script>
<script src="enhancement-3.js"></script>
…
<script src="enhancement-10.js"></script>
Setiap skrip peningkatan menangani komponen halaman tertentu, tetapi memerlukan fungsi utilitas di dependencies.js. Idealnya, kita ingin mendownload semuanya secara asinkron, lalu mengeksekusi skrip peningkatan sesegera mungkin, dalam urutan apa pun, tetapi setelah dependencies.js. Ini adalah progressive progressive enhancement! Sayangnya, tidak ada cara deklaratif untuk mencapai hal ini kecuali jika skrip itu sendiri diubah untuk melacak status pemuatan dependencies.js. Bahkan async=false tidak menyelesaikan masalah ini, karena eksekusi enhancement-10.js akan diblokir pada 1-9. Bahkan, hanya ada satu browser yang memungkinkan hal ini tanpa hack…
IE punya ide.
IE memuat skrip secara berbeda dengan browser lain.
var script = document.createElement('script');
script.src = 'whatever.js';
IE mulai mendownload “whatever.js” sekarang, browser lain tidak mulai mendownload hingga skrip telah ditambahkan ke dokumen. IE juga memiliki peristiwa, “readystatechange”, dan properti, “readystate”, yang memberi tahu kita progres pemuatan. Hal ini sebenarnya sangat berguna, karena memungkinkan kita mengontrol pemuatan dan eksekusi skrip secara independen.
var script = document.createElement('script');
script.onreadystatechange = function() {
if (script.readyState == 'loaded') {
// Our script has download, but hasn't executed.
// It won't execute until we do:
document.body.appendChild(script);
}
};
script.src = 'whatever.js';
Kita dapat membuat model dependensi yang kompleks dengan memilih kapan harus menambahkan skrip ke dokumen. IE telah mendukung model ini sejak versi 6. Cukup menarik, tetapi masih mengalami masalah visibilitas pramuat yang sama seperti async=false
.
Cukup! Bagaimana cara memuat skrip?
Oke. Jika Anda ingin memuat skrip dengan cara yang tidak memblokir rendering, tidak melibatkan pengulangan, dan memiliki dukungan browser yang sangat baik, berikut yang saya sarankan:
<script src="//other-domain.com/1.js"></script>
<script src="2.js"></script>
Itu. Di akhir elemen isi. Ya, menjadi developer web itu seperti menjadi Raja Sisyphus (boom! 100 poin hipster untuk referensi mitologi Yunani!). Keterbatasan dalam HTML dan browser mencegah kami melakukan hal yang lebih baik.
Saya berharap modul JavaScript akan menyelamatkan kita dengan menyediakan cara non-pemblokiran deklaratif untuk memuat skrip dan memberikan kontrol atas urutan eksekusi, meskipun hal ini mengharuskan skrip ditulis sebagai modul.
Ih, pasti ada yang lebih baik yang bisa kita gunakan sekarang?
Untuk mendapatkan poin bonus, jika Anda ingin benar-benar agresif dalam meningkatkan performa, dan tidak keberatan dengan sedikit kompleksitas dan pengulangan, Anda dapat menggabungkan beberapa trik di atas.
Pertama, kita menambahkan deklarasi sub-resource, untuk pramuat:
<link rel="subresource" href="//other-domain.com/1.js">
<link rel="subresource" href="2.js">
Kemudian, secara inline di bagian head dokumen, kita memuat skrip dengan JavaScript, menggunakan async=false
, yang kembali ke pemuatan skrip berbasis readystate IE, yang kembali ke penundaan.
var scripts = [
'1.js',
'2.js'
];
var src;
var script;
var pendingScripts = [];
var firstScript = document.scripts[0];
// Watch scripts load in IE
function stateChange() {
// Execute as many scripts in order as we can
var pendingScript;
while (pendingScripts[0] && pendingScripts[0].readyState == 'loaded') {
pendingScript = pendingScripts.shift();
// avoid future loading events from this script (eg, if src changes)
pendingScript.onreadystatechange = null;
// can't just appendChild, old IE bug if element isn't closed
firstScript.parentNode.insertBefore(pendingScript, firstScript);
}
}
// loop through our script urls
while (src = scripts.shift()) {
if ('async' in firstScript) { // modern browsers
script = document.createElement('script');
script.async = false;
script.src = src;
document.head.appendChild(script);
}
else if (firstScript.readyState) { // IE<10
// create a script and add it to our todo pile
script = document.createElement('script');
pendingScripts.push(script);
// listen for state changes
script.onreadystatechange = stateChange;
// must set src AFTER adding onreadystatechange listener
// else we'll miss the loaded event for cached scripts
script.src = src;
}
else { // fall back to defer
document.write('<script src="' + src + '" defer></'+'script>');
}
}
Setelah beberapa trik dan minifikasi, ukurannya menjadi 362 byte + URL skrip Anda:
!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer></'+t+">"),a.src=s}(document,"script",[
"//other-domain.com/1.js",
"2.js"
])
Apakah byte tambahan tersebut sebanding dengan menyertakan skrip sederhana? Jika sudah menggunakan JavaScript untuk memuat skrip secara bersyarat, seperti yang dilakukan BBC, Anda juga dapat memanfaatkan pemicu download tersebut lebih awal. Jika tidak, mungkin tidak, tetap gunakan metode akhir isi yang sederhana.
Wah, sekarang saya tahu mengapa bagian pemuatan skrip WHATWG begitu luas. Saya butuh minuman.
Referensi cepat
Elemen skrip biasa
<script src="//other-domain.com/1.js"></script>
<script src="2.js"></script>
Spesifikasi menyatakan: Mendownload bersama, mengeksekusi secara berurutan setelah CSS yang tertunda, memblokir rendering hingga selesai. Browser berkata: Baik, pak.
Tunda
<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>
Spesifikasi menyatakan: Download bersama, jalankan secara berurutan tepat sebelum DOMContentLoaded. Mengabaikan “defer” pada skrip tanpa “src”. IE < 10 mengatakan: Saya mungkin mengeksekusi 2.js di tengah-tengah eksekusi 1.js. Bukankah itu menyenangkan? Browser berwarna merah mengatakan: Saya tidak tahu apa itu “penundaan”, saya akan memuat skrip seolah-olah tidak ada. Browser lain mengatakan: Oke, tetapi saya mungkin tidak mengabaikan “defer” pada skrip tanpa “src”.
Asinkron
<script src="//other-domain.com/1.js" async></script>
<script src="2.js" async></script>
Spesifikasinya menyatakan: Mendownload bersama, mengeksekusi dalam urutan apa pun yang didownload. Browser berwarna merah mengatakan: Apa itu 'asinkron'? Saya akan memuat skrip seolah-olah tidak ada. Browser lain mengatakan: Ya, ok.
Asinkron salah
[
'1.js',
'2.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
Spesifikasinya menyatakan: Download bersama, jalankan secara berurutan segera setelah semua didownload. Firefox < 3.6, Opera mengatakan: Saya tidak tahu apa itu "asinkron", tetapi kebetulan saya mengeksekusi skrip yang ditambahkan melalui JS sesuai urutan penambahannya. Safari 5.0 mengatakan: Saya memahami “asinkron”, tetapi tidak memahami cara menyetelnya ke “false” dengan JS. Kami akan mengeksekusi skrip Anda segera setelah skrip tersebut diaktifkan, dalam urutan apa pun. IE < 10 menampilkan: Tidak tahu tentang “asinkron”, tetapi ada solusi menggunakan “onreadystatechange”. Browser lain yang berwarna merah menampilkan: Saya tidak mengerti hal “asinkron” ini, saya akan mengeksekusi skrip Anda segera setelah skrip tersebut dimuat, dalam urutan apa pun. Hal lainnya mengatakan: Saya adalah teman Anda, kita akan melakukan ini sesuai prosedur.