Inilah yang terjadi ketika browser memuat situs web dengan <script>tag di atasnya:
- Ambil halaman HTML (mis. Index.html)
- Mulai parsing HTML
- Parser menemukan
<script>tag yang mereferensikan file skrip eksternal.
- Browser meminta file skrip. Sementara itu, parser memblokir dan berhenti mem-parsing HTML lain di halaman Anda.
- Setelah beberapa saat skrip diunduh dan selanjutnya dieksekusi.
- Parser terus mem-parsing sisa dokumen HTML.
Langkah # 4 menyebabkan pengalaman pengguna yang buruk. Situs web Anda pada dasarnya berhenti memuat hingga Anda mengunduh semua skrip. Jika ada satu hal yang dibenci pengguna sedang menunggu sebuah situs web dimuat.
Mengapa ini bahkan terjadi?
Setiap skrip dapat menyisipkan HTML sendiri melalui document.write()atau manipulasi DOM lainnya. Ini menyiratkan bahwa parser harus menunggu sampai skrip telah diunduh & dieksekusi sebelum dapat dengan aman menguraikan sisa dokumen. Lagipula, skrip bisa memasukkan HTML-nya sendiri ke dalam dokumen.
Namun, sebagian besar pengembang JavaScript tidak lagi memanipulasi DOM saat dokumen dimuat. Sebagai gantinya, mereka menunggu hingga dokumen dimuat sebelum memodifikasinya. Sebagai contoh:
<!-- index.html -->
<html>
<head>
<title>My Page</title>
<script src="my-script.js"></script>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
</body>
</html>
Javascript:
// my-script.js
document.addEventListener("DOMContentLoaded", function() {
// this function runs when the DOM is ready, i.e. when the document has been parsed
document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});
Karena browser Anda tidak tahu my-script.js tidak akan mengubah dokumen sampai dokumen tersebut diunduh & dieksekusi, parser berhenti mengurai.
Rekomendasi kuno
Pendekatan lama untuk memecahkan masalah ini adalah dengan meletakkan <script>tag di bagian bawah Anda<body> , karena ini memastikan parser tidak diblokir sampai akhir.
Pendekatan ini memiliki masalah sendiri: browser tidak dapat mulai mengunduh skrip hingga seluruh dokumen diuraikan. Untuk situs web yang lebih besar dengan skrip & stylesheet besar, dapat mengunduh skrip sesegera mungkin sangat penting untuk kinerja. Jika situs web Anda tidak dimuat dalam 2 detik, orang akan pergi ke situs web lain.
Dalam solusi optimal, browser akan mulai mengunduh skrip Anda sesegera mungkin, sementara pada saat yang sama mem-parsing sisa dokumen Anda.
Pendekatan modern
Hari ini, browser mendukung asyncdandefer atribut pada skrip. Atribut ini memberi tahu browser bahwa aman untuk melanjutkan penguraian saat skrip sedang diunduh.
async
<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>
Skrip dengan atribut async dijalankan secara tidak sinkron. Ini berarti skrip dieksekusi segera setelah diunduh, tanpa memblokir browser sementara itu.
Ini menyiratkan bahwa skrip 2 dapat diunduh & dieksekusi sebelum skrip 1.
Menurut http://caniuse.com/#feat=script-async , 97,78% dari semua browser mendukung ini.
menunda
<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>
Skrip dengan atribut defer dijalankan secara berurutan (yaitu skrip pertama 1, lalu skrip 2). Ini juga tidak memblokir browser.
Tidak seperti skrip async, skrip penangguhan hanya dieksekusi setelah seluruh dokumen dimuat.
Menurut http://caniuse.com/#feat=script-defer , 97,79% dari semua browser mendukung ini. 98,06% mendukungnya setidaknya sebagian.
Catatan penting tentang kompatibilitas browser: dalam beberapa keadaan IE <= 9 dapat mengeksekusi skrip yang ditangguhkan rusak. Jika Anda perlu mendukung browser tersebut, baca ini dulu!
Kesimpulan
Canggih saat ini adalah menempatkan skrip ke dalam <head>tag dan menggunakan atribut asyncatau defer. Ini memungkinkan skrip Anda untuk diunduh secepatnya tanpa memblokir browser Anda.
Hal yang baik adalah bahwa situs web Anda masih harus memuat dengan benar pada 2% browser yang tidak mendukung atribut ini sementara mempercepat 98% lainnya.