Perbedaan antara ASYNC dan DEFER

Selamat Datang di Blog Orang IT . Dalam dunia pemrograman kita tidak asing lagi dengan istilah Async dan Defer yang biasanya digunakan untuk meload fungsi javascript yang sumbernya dari luar template . Sebenarnya Async dan Defer memiliki fungsi yang sama yaitu untuk mempercepat loading blog, hanya saja ada sedikit perbedaan antara keduanya yang jarang diketahui oleh sebagian orang , sementara pemula justru menganggap Async dan Defer sama saja 

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.

Dalam postingan kali ini saya akan menjelaskan perbedaan dari Async dan Defer

1. Penjelasan ASYNC

<script src=”yourscript.js” async></script>

Async, atau lebih lengkapnya lagi Asynchronous adalah antonim dari Sync, atau Sychronous. Async bila diartikan ke dalam bahasa Indonesia berarti asinkron, alias tidak sinkron.

Script yang diberi Async akan didownload saat HTML sedang di parse, lalu setelah selesai didownload, script langsung dieksekusi/dijalankan. Saat script sedang dijalankan, HTML akan berhenti melakukan parse. Setelah selesai dieksekusi, barulah HTML melanjutkan parse sampai selesai.

Bagi yang masih bingung apa maksudnya, coba lihat gambar ilustrasi dibawah:

Dengan menggunakan Async, HTML akan tetap dimuat secara cepat tanpa menunggu proses download script eksternal terlebih dahulu. Async memiliki 1 kelemahan, yaitu bagi pengguna laptop/device yang spesifikasinya low-end, terlalu banyak script yang dibuat Async menyebabkan lag. Selain itu, Async juga dapat membuat beberapa script menjadi tidak work, sehingga masalah-masalah umum seperti menu dropdown tidak berfungsi atau widget tidak berjalan sering terjadi

Dengan attribute async, browser akan melakukan download script secara paralel dengan proses parsing HTML. Browser kemudian akan 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 mendownload 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.

2. Penjelasan Defer

<script src=”yourscript.js” defer></script>

Defer bila diartikan ke dalam bahasa Indonesia yaitu menunda. Dalam dunia web, Defer memiliki arti sebagai penundaan eksekusi.

Script yang diberi Defer sama seperti Async, yaitu didownload pada saat
HTML sedang diparse. Bedanya, setelah selesai didownload, script tidak
langsung dieksekusi. Script baru dieksekusi dan dijalankan ketika HTML
telah selesai di parse hingga 100%.

Berikut ilustrasinya:

Defer memiliki 1 kelemahan, yaitu bisa saja script tersebut tidak
berjalan dengan semestinya, karena ada beberapa script yang memang harus
dieksekusi saat HTML sedang diparse atau belum selesai diparse
sepenuhnya. 

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.