Persaudaraan dari defer dan async yang berbeda...

TeknisTakis Mar 26, 2020

Saat peramban web menerima respon HTML dari suatu server, ada beberapa langkah yang harus diambil sebelum hasil render ditampilkan di layar. Disini kita akan membahas kondisi ketika melakukan suatu script di halaman HTML, ketika asal memasang suatu scripts maka akan sangat mempengaruhi peforma dari web yang kita buat.

Biasanya kita memasang sebuah external script seperti ini :

<script src="utama.js"></script>

Ketika memproses HTML dan menemukan tag script tersebut, browser akan mengunduh script kemudian mengeksekusinya. Bagaimana jika posisi script tersebut berada dalam tag <head> seperti ini ?

<html>
  <head>
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    ... ini tag yang lain 
  </body>
</html>

Dari contoh diatas tag script jquery akan di unduh terlebih dahulu dan kemudian melanjutkan proses eksekusi sampai selesai. Disini akan muncul pertanyaan :

Bagaimana jika koneksi internet lambat dan menyebabkan script jquery belum diunduh sampai selesai ?

Halaman peramban web akan terdelay kemudian untuk solusi permasalahan ini dapat menggunakan atribut async dan defer, tetapi async dan defer tidak kompatibel untuk browser versi lama.

Support tabel dapat di cek pada website caniuse.com untuk async https://caniuse.com/#feat=script-async dan untuk defer https://caniuse.com/#feat=script-defer

Komparasi performa

Tanpa defer maupun async pada tag head

https://flaviocopes.com/javascript-async-defer/

Parsing html akan terjeda sampai dari tag script ter load dan tereksekusi, ketika proses tersebut sudah selesai maka akan melanjutkan proses parsing.

Menggunakan async

https://flaviocopes.com/javascript-async-defer/

Pada saat parsing tag script pada head akan di load secara asynchronus hingga proses selesai kemudian mengeksekusinya dan melanjutkan parsing halaman HTML, serta async dapat melakukan blocking saat parsing HTML.

<script async src="utama.js"></script>

Menggunakan defer

https://flaviocopes.com/javascript-async-defer/with-defer.png
<script defer src="utama.js"></script>

Pada attribut defer, proses load script dilakukan secara asynchronus mengikuti pada saar render HTML kemudian mengeksekusinya. Secara grafis terlihat jelas perbedaan diantara async dan defer, untuk kecepatan defer diunggulkan disini dikarenakan tidak melakukan blocking saat parsing HTML.

Oke sekian perbandingan dari async dan defer, jangan lupa (ehem) ...

Sumber Referensi & Gambar :

‏  

Di antara dengan flatburger

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.