Assalamualaikum teman2 syntax blog, kali ini admin akan membahas bagaimana caranya meletekkan tag <script> yang benar di html, loh kenapa harus ada aturannya ? iya kalau tidak berarti anda belum developer modern yang hanya ketak ketik dan tidak tau performa sebuah aplikasi.
ok kita pelajari dulu bagaimana cara kerja browser nge-load sebuah website.
Browser load website
pernakah anda mengetahui bagaimana cara browser membuka sebuah website ? seperti ini langkah2nya.
- Mencari Html page (contoh index.html)
- Kemudian Di parsing menjadi HTML
- Hasil Parsing hanya merender Html di page tadi, belum termasuk mengambil external file, contoh tag yang mengambil external file adalah tag <script>
- download external file
- eksekusi external file
- kemudian menjadi sebuah HTML page yang sempurna
langkah yang ke 4 menyebabkan pengalaman pengguna yang buruk. Situs web pada dasarnya berhenti memuat sampai anda men-download semua
script.
Mengapa hal ini bisa terjadi ?
Setiap script dapat menyisipkan HTML sendiri melalui document.write() atau DOM Manipulations. ini berarti bahwa parser harus menunggu sampai script telah download. setelah semua ke download maka script bisa dimasukkan HTML sendiri dalam dokumen.
Namun sebagai developer javascript tidak lagi memanipulasi DOM pada saat halaman masih loading.
nah sebaliknya mereka pasti menunggu sampai semua DOM ke load di sebuah halaman, dengan contoh script di bawah ini.
javascriptnya
karena browser anda tidak tahu my-script.js tidak akan memodifikasi dokumen sampai semua ke download dan di eksekusi, parser berhenti parsing.
Rekomendasi Kuno
coba letakkan
<script> setelah tag
<body> karena hal ini memastikan parser tidak diblokir sampai akhir.
permasalahaannya : browser tidak bisa mulai men-download script sampai seluruh document ter parsing.
Rekomendasi Modern
sekarang browser sudah mendukung attribute async dan defer pada tag <script> nah sekarang kita jadi di permudah dengan adanya 2 attribute tadi, dengan attribute ini akan memberitahu browser itu aman untuk melanjutkan parsing sementara script sedang di download
Script dengan atribut async dieksekusi asynchronously. Ini berarti script ini dijalankan secepat itu download, tanpa menghalangi browser sementara itu.
Ini berarti bahwa hal itu mungkin script-2 didownload & dijalankan sebelum skrip 1.
defer
script dengan attribute defer dijalankan dalam berurutan (yaitu pertama script 1, kemudian script 2). ini juga tidak menghalangi browser
Tidak seperti script async, menunda skrip hanya dilaksanakan setelah seluruh dokumen telah dimuat.
Kesimpulan
Saat ini state-of-the-art adalah penempatan script di tag
<head> dan menggunakan attribute
async atau
defer . hal ini memungkinkan script anda untuk di download secepat mungkin tanpa menghalangi browser anda (atau biasa di sebut
blocking code).
Hal yang baik adalah bahwa website Anda masih harus memuat dengan benar di 20% dari browser yang tidak mendukung atribut ini, sementara mempercepat lainnya 80%.
Wassalamualaikum wr.wb
