Perbedaan antara ASYNC dan DEFER

PENJELASAN MENGENAI ASYNC DAN DEFER BESERTA CARA KERJANYA


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:

Penjelasan ASYNC

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:

Penjelasan Defer

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.

Sebagian besar browser telah memiliki dukungan terhadap async dan defer. Nah kapan ASYNC atau DEFER digunakan ?
  • Hanya gunakan async dan/atau defer untuk eksternal javascript.
  • Jika Javascript indenpenden dan tidak terkait kode javascript yang lain, gunakan async.
  • Jika ada javascript yang tergantung di javascript lain, gunakan defer dan pastikan dieksekusi saat event DOMContentLoaded atau jQuery ready.

Belum ada Komentar untuk "Perbedaan antara ASYNC dan DEFER"

Posting Komentar

Sumber artikel : Opini penulis , Pengetahuan penulis , Karangan penulis , tulisan temen , tulisan saudara , blog lain dan Post tamu

Sementara admin vakum dulu dari dunia perbloggingan mungkin komentar anda tidak akan muncul , blog otomatis update sampai maret 2020 dan saya akan segera kembali setelah menyelesaikan training

Berikan info jika ada link mati dan kalau mau copas kasih sumber ya nanti saya laporkan DMCA blogmu disembunyikan diserp

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel