Dalam dunia web pasti anda tidak asing dengan yang namanya Async dan Defer. Ya, kedua nama ini sering dipakai saat ingin me-load sesuatu (biasanya Javascript) yang dibuat eksternal.
Async dan Defer memiliki fungsi yang sama, yaitu mempercepat loading web. Hanya saja ada beberapa perbedaan yang tidak terlalu mencolok dari keduanya. Nah perbedaan inilah yang jarang orang ketahui, malah ada yang menganggap Async dengan Defer itu sama.
Padahal jauh berbeda...
Oleh karenanya, kali ini saya ingin menjelaskan apa saja perbedaan dari Async dan Defer tadi. Silakan disimak baik-baik...
Penjelasan Dan Perbedaan Antara ASYNC dengan DEFER JavaScript
1. Async
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 akan membuat lag.
Selain itu, Async juga dapat membuat beberapa script menjadi tidak work, sehingga mengakibatkan masalah-masalah umum seperti menu dropdown yang rusak.
2. Defer
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.
Demikian artikel seputar perbedaan antara ASYNC dengan DEFER Javascript, semoga bermanfaat untuk anda.