Penjelasan singkat tentang Asynchronous dan Deferred JavaScript

Penjelasan singkat tentang apa itu asynchronous dan deferred JavaScript, bagaimana cara kerja serta bagaimana cara menggunakannya


Ketika melakukan Optimasi Kecepatan Website, JavaScript sering kali dianggap sebagai "Parser Blocking Resource". Ini berarti bahwa penguraian dokumen HTML itu sendiri diblokir oleh JavaScript. Ketika parser mencapai tag <script>, apakah itu internal atau eksternal, maka proses akan berhenti untuk mengambil (jika ada eksternal) dan menjalankannya.

Perilaku ini bisa menjadi masalah jika kita memuat beberapa file JavaScript di halaman, karena ini akan mengganggu waktu untuk render file meskipun dokumen sebenarnya tidak bergantung pada file tersebut. Untungnya, elemen <script> memiliki dua atribut, async dan defer, yang dapat memberi kita kontrol lebih terhadap bagaimana dan kapan file eksternal diambil dan dijalankan. Atribut async dan defer untuk elemen <script> memiliki manfaat yang besar sekarang, jadi inilah saatnya untuk mempelajari dengan tepat apa saja kegunaannya!

Eksekusi Normal <script>

Mari kita mulai dengan mendefinisikan apa itu <script> tanpa atribut apa pun. Penguraian HTML dihentikan sementara agar skrip diambil dan dijalankan, sehingga memperpanjang jumlah waktu yang diperlukan untuk sampai pada tampilan awal.

Sebelum melihat efek dari kedua atribut tersebut, pertama-tama kita harus melihat apa yang terjadi dalam keadaan normal. Secara default, seperti yang disebutkan di atas, file JavaScript akan mengganggu penguraian dokumen HTML agar bisa diambil (jika tidak inline) dan dieksekusi.

Atribut async <script async>

Atribut async digunakan untuk menunjukkan ke browser bahwa file skrip dapat dieksekusi secara asinkron. Parser HTML tidak perlu menunggu pada titik yang memiliki tag skrip untuk diambil dan dijalankan, eksekusi dapat terjadi kapan pun. Skrip menjadi siap setelah diambil bersamaan dengan parsing dokumen.

<script async src = "script.js">

Atribut ini hanya tersedia untuk file skrip eksternal. Bila naskah eksternal memiliki atribut ini, file tersebut dapat diunduh saat dokumen HTML masih parsing. Setelah diunduh, parsing dijeda agar skrip dijalankan. Async mendownload file selama parsing HTML dan akan memberhentikan sementara saat parsing HTML dan menjalankannya saat selesai mendownload.

Atribut defer<script defer>

Teknik defer akan mendownload file selama parsing HTML dan hanya akan menjalankannya setelah parsing selesai. Penangguhan skrip juga dijamin untuk dijalankan sesuai urutan dokumen tersebut muncul dalam dokumen. Atribut defer memberitahu browser untuk hanya menjalankan file script setelah dokumen HTML telah sepenuhnya diurai.

<script defer src = "script.js">

Seperti skrip asinkron yang dimuat, file tersebut dapat didownload saat dokumen HTML masih parsing. Namun, biarpun file tersebut sudah selesai diunduh jauh sebelum dokumen selesai di-parsing, script tidak dijalankan sampai parsing selesai.

Kapan kita harus menggunakannya dan yang mana?

Biasanya Anda akan menggunakan async jika memungkinkan, lalu defer lalu tanpa atribut. Berikut adalah beberapa aturan umum yang harus diikuti:
  • Jika scriptnya modular dan tidak bergantung pada script apapun maka gunakan async.
  • Jika naskah itu bergantung atau diandalkan oleh naskah lain maka gunakanlah defer.
  • Jika skripnya kecil dan diandalkan oleh skrip asinkron, gunakan skrip inline tanpa atribut yang ditempatkan di atas skrip asinkron.
IE9 dan versi di bawahnya memiliki beberapa bug yang sangat buruk dalam implementasi defer sehingga perintah eksekusi tidak dijamin berhasil. Jika Anda perlu untuk mensupport  IE versi 9 dan kebawah saya sarankan untuk tidak menggunakan defer sama sekali dan sertakan skrip anda tanpa atribut jika perintah eksekusi penting.

COMMENTS

Review http://ilmusetitik.blogspot.com/ on alexa.com
Nama

Apache,3,Bisnis Online,1,Blog,1,CSS,1,Framework,1,HTML,1,HTML and CSS,2,Info,2,Javascript,2,Javascript and AJAX,5,linux,2,MySQL,2,Networking,1,Open GL,1,Optimasi Website,7,Pemrograman java,1,Pemrograman web,5,PHP,6,phpMyAdmin,1,SEO,3,SQL Server,5,Xampp,1,
ltr
item
Nanang Gunawan Blog: Penjelasan singkat tentang Asynchronous dan Deferred JavaScript
Penjelasan singkat tentang Asynchronous dan Deferred JavaScript
Penjelasan singkat tentang apa itu asynchronous dan deferred JavaScript, bagaimana cara kerja serta bagaimana cara menggunakannya
https://4.bp.blogspot.com/-4q1Y6zfkSJE/WQSwN7e0zKI/AAAAAAAAA3A/Xxlcf0CFFhQP4nprZtkLfZWyVYCaSmWfACLcB/s1600/eliminate-render-blocking-javascript-css.jpg
https://4.bp.blogspot.com/-4q1Y6zfkSJE/WQSwN7e0zKI/AAAAAAAAA3A/Xxlcf0CFFhQP4nprZtkLfZWyVYCaSmWfACLcB/s72-c/eliminate-render-blocking-javascript-css.jpg
Nanang Gunawan Blog
http://www.nananggunawan.com/2017/05/penjelasan-singkat-tentang-asynchronous.html
http://www.nananggunawan.com/
http://www.nananggunawan.com/
http://www.nananggunawan.com/2017/05/penjelasan-singkat-tentang-asynchronous.html
true
4195327445586723627
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy