Ketika melakukan Optimasi Kecepatan Website, JavaScript sering kali dianggap sebagai "Parser Blocking Resource". Ini berarti bahwa penguraian dokumen HTML itu sendiri diblokir oleh JavaScript. Ketika parser mencapai tag <script>, apakah itu internal atau eksternal, maka proses akan berhenti untuk mengambil (jika ada eksternal) dan menjalankannya.
Perilaku ini bisa menjadi masalah jika kita memuat beberapa file JavaScript di halaman, karena ini akan mengganggu waktu untuk render file meskipun dokumen sebenarnya tidak bergantung pada file tersebut. Untungnya, elemen <script> memiliki dua atribut, async dan defer, yang dapat memberi kita kontrol lebih terhadap bagaimana dan kapan file eksternal diambil dan dijalankan. Atribut async dan defer untuk elemen <script> memiliki manfaat yang besar sekarang, jadi inilah saatnya untuk mempelajari dengan tepat apa saja kegunaannya!
Eksekusi Normal <script>
Mari kita mulai dengan mendefinisikan apa itu <script> tanpa atribut apa pun. Penguraian HTML dihentikan sementara agar skrip diambil dan dijalankan, sehingga memperpanjang jumlah waktu yang diperlukan untuk sampai pada tampilan awal.
Sebelum melihat efek dari kedua atribut tersebut, pertama-tama kita harus melihat apa yang terjadi dalam keadaan normal. Secara default, seperti yang disebutkan di atas, file JavaScript akan mengganggu penguraian dokumen HTML agar bisa diambil (jika tidak inline) dan dieksekusi.
Atribut async <script async>
Atribut async digunakan untuk menunjukkan ke browser bahwa file skrip dapat dieksekusi secara asinkron. Parser HTML tidak perlu menunggu pada titik yang memiliki tag skrip untuk diambil dan dijalankan, eksekusi dapat terjadi kapan pun. Skrip menjadi siap setelah diambil bersamaan dengan parsing dokumen.
<script async src = "script.js">
Atribut ini hanya tersedia untuk file skrip eksternal. Bila naskah eksternal memiliki atribut ini, file tersebut dapat diunduh saat dokumen HTML masih parsing. Setelah diunduh, parsing dijeda agar skrip dijalankan. Async mendownload file selama parsing HTML dan akan memberhentikan sementara saat parsing HTML dan menjalankannya saat selesai mendownload.
Atribut defer<script defer>
Teknik defer akan mendownload file selama parsing HTML dan hanya akan menjalankannya setelah parsing selesai. Penangguhan skrip juga dijamin untuk dijalankan sesuai urutan dokumen tersebut muncul dalam dokumen. Atribut defer memberitahu browser untuk hanya menjalankan file script setelah dokumen HTML telah sepenuhnya diurai.
<script defer src = "script.js">
Seperti skrip asinkron yang dimuat, file tersebut dapat didownload saat dokumen HTML masih parsing. Namun, biarpun file tersebut sudah selesai diunduh jauh sebelum dokumen selesai di-parsing, script tidak dijalankan sampai parsing selesai.
Kapan kita harus menggunakannya dan yang mana?
Biasanya Anda akan menggunakan async jika memungkinkan, lalu defer lalu tanpa atribut. Berikut adalah beberapa aturan umum yang harus diikuti:
- Jika scriptnya modular dan tidak bergantung pada script apapun maka gunakan async.
- Jika naskah itu bergantung atau diandalkan oleh naskah lain maka gunakanlah defer.
- Jika skripnya kecil dan diandalkan oleh skrip asinkron, gunakan skrip inline tanpa atribut yang ditempatkan di atas skrip asinkron.
IE9 dan versi di bawahnya memiliki beberapa bug yang sangat buruk dalam implementasi defer sehingga perintah eksekusi tidak dijamin berhasil. Jika Anda perlu untuk mensupport IE versi 9 dan kebawah saya sarankan untuk tidak menggunakan defer sama sekali dan sertakan skrip anda tanpa atribut jika perintah eksekusi penting.
Comments
Post a Comment