Ads: Singset Premium Jekyll Theme. A beautiful and modern theme for Jekyll blog. Use code 2tv6qos to get $18 off your purchase!
Attribute Async dan Defer
- Kategori:
- html
- javascript
Tag HTML script memiliki attribute async
dan defer
yang berguna untuk mempercepat page load time. Attribute async
muncul di HTML 5 sedangkan defer
sudah cukup lama di-_support_ oleh browser termasuk Internet Explorer.
Script Tag
<script src="yourscript.js"></script>
Ketika browser menemukan tag script
ketika sedang melakukan parsing HTML, maka browser akan berhenti melakukan proses parsing dan mengeksekusi javascript hingga selesai.
Keterangan:
- Hijau: Browser melakukan proses parsing
- Abu-abu: Browser berhenti melakukan proses parsing
- Kuning: Browser melakukan download javascript
- Merah: Browser melakukan eksekusi javascript
Script Tag Dengan Atribut Async
<script src="yourscript.js" async></script>
Dengan attribute async
, browser akan melakukan download script
secara paralel dengan proses parsing HTML. Browser kemudian akan melakukan berhenti parsing ketika melakukan eksekusi javascript yang telah di-_download_ tersebut. Alhasil browser akan lebih cepat melakukan proses rendering dibanding tanpa attribute async
.
Ada kemungkinan browser selesai download dan eksekusi sebelum atau sesudah event DOMContentLoaded
, namun bisa dipastikan selesai download dan eksekusi sebelum event load
. Sehingga jangan menggunakan event DOMContentLoaded
atau jQuery ready
didalam file javascript yang dipasang script async
karena kode javascript tersebut belum pasti dieksekusi.
Mengenai event DOMContentLoaded
dan load
dapat dilihat di tulisan sebelumnya yang berjudul HTML Event DOMContentLoaded dan Load.
Script Tag Dengan Atribut Defer
<script src="yourscript.js" defer></script>
Dengan attribute defer
, browser akan melakukan download script
secara paralel dengan proses parsing HTML. Javascript yang telah di-_download_ tersebut dieksekusi tepat sebelum event DOMContentLoaded
terjadi. Attribute ini juga dapat membuat browser lebih cepat melakukan proses rendering.
Berbeda dengan async
, jika kode dipasang script defer
maka kode DOMContentLoaded
atau jQuery ready
bisa dipastikan akan tereksekusi.
Jika attribute async
dan defer
digunakan bersamaan, maka akan digunakan async
dan fallback ke defer
ketika browser tidak support async
.
<script src="yourscript.js" async defer></script>
Dukungan Peramban
Sebagian besar peramban atau browser telah memiliki dukungan terhadap async dan defer.
Kapan Pakai Async atau Defer
- Hanya gunakan
async
dan/ataudefer
untuk eksternal javascript. - Jika Javascript indenpenden dan tidak terkait kode javascript yang lain, gunakan
async
. - Jika ada javascript yang tergantung javascript lain, gunakan
defer
dan pastikan dieksekusi saat eventDOMContentLoaded
atau jQueryready
.
Artikel lainnya
- Script Tag - async & defer
- Async-loaded scripts with DOMContentLoaded or load event handlers not being called?
- HTML5’s async Script Attribute
- Running Your Code at the Right Time
- Tag:
- #html
- #javascript
Rekomendasi Services
Service-service dibawah ini pernah dan sedang oleh KAK Labs saat mengembangkan project dan sangat direkomendasikan.
- Digital Ocean - Daftar server cloud di Digital Ocean melalui link ini akan mendapatkan kredit $200
- Bunny CDN - CDN favorit, yang KAK Labs gunakan disemua project
- Namecheap - Tempat beli domain .id terfavorit.
- Backblaze - Online Backup agar laptop jika terkena ransomware tetap tenang
- Dediserve - Cloud server ini memiliki Datacenter di Jakarta, digunakan oleh project KAK Tools
Tulisan Terbaru
HTML Boilerplate
HTML Boilerplate versi KAK Labs
No-Class / Classless CSS Frameworks
Daftar CSS frameworks tanpa class versi KAK Labs
Microsoft C#
Review, rekomendasi link belajar dan rekomendasi extensions Visual Studio Code untuk C#
Typography
Typography, 50 Bytes CSS, dan 100 Bytes CSS
Membangun Penyimpanan RAID 5 - Bagian 2 (Tamat)
Bagian kedua membangun penyimpanan RAID, tulisan kali fokus bagaimana setup HDD Enclosure untuk mode RAID