defer lan async ngubah kapan script eksternal <script> ndownload lan execute relatif menyang HTML parsing. Loro-lorone ngidini script ndownload parallel tanpa ngalangi parser — bedane yaiku timing execution.
html
defer lan async ngubah kapan script eksternal <script> ndownload lan execute relatif menyang HTML parsing. Loro-lorone ngidini script ndownload parallel tanpa ngalangi parser — bedane yaiku timing execution.
Normal: parse──stop──[download+exec]──parse──────── (slowest)
async: parse──────────────────exec──parse──────── (runs whenever it arrives)
defer: parse───────────────────────────parse──exec (after parsing, before DOMContentLoaded)
async | defer | |
|---|---|---|
| Download | parallel | parallel |
| Execute | pas rampung ndownload | sawise HTML rampung diparse |
| Urutan terjaga? | Ora (sapa rampung pisik) | Ya (urutan dokumen) |
| Ngalangi parser? | mung ringkes waktu exec | ora |
defer — kanggo script sing gek-gek DOM utawa gumantung siji lan liya/urutan (kode app mu). Dheweke execute sawise DOM ana, ing urutan, sadurunge DOMContentLoaded.async — kanggo script mandiri pihak katelu sing ora gumantung DOM utawa script liya (analytics, ads). Urutan ora penting, jalanake dheweke gawé cepet.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Cathetan: loro-lorone mung ngandhut script eksternal (src); dibolas ing inline script. ES modules (type="module") deferred default.
Nggunakake defer/async nyegah script ngalangi HTML parsing, kang directly nambah performance load lan First Contentful Paint.
Pilih kang tepat (defer kanggo app code urutan gumantung DOM, async kanggo script pihak katelu fire-and-forget) ngindhari slow load lan order-dependency bugs.