defer og async endrer når et eksternt <script> lastes ned og kjøres i forhold til HTML-parsing. Begge lar scriptet lastes ned parallelt uten å blokkere parseren — forskjellen er i kjøringstidspunktet.
html
defer og async endrer når et eksternt <script> lastes ned og kjøres i forhold til HTML-parsing. Begge lar scriptet lastes ned parallelt uten å blokkere parseren — forskjellen er i kjøringstidspunktet.
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 | |
|---|---|---|
| Nedlasting | parallelt | parallelt |
| Kjøres | så snart lastet ned | etter at HTML er fullstendig analysert |
| Rekkefølge bevart? | Nei (hvem som fullfører først) | Ja (dokumentrekkefølge) |
| Blokkerer parser? | bare kort under kjøring | aldri |
defer — for scripts som rører DOM eller avhenger av hverandre/rekkefølge (appkoden din). De kjøres etter at DOM finnes, i rekkefølge, like før DOMContentLoaded.async — for uavhengige tredjepartsscripts som ikke avhenger av DOM eller andre scripts (analytics, annonser). Rekkefølge spiller ingen rolle, kjør dem så fort som mulig.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Merk: begge gjelder bare eksterne scripts (src); de ignoreres på inline scripts. ES-moduler (type="module") utsettes som standard.
Bruk av defer/async forhindrer scripts fra å blokkere HTML-parsing, noe som direkte forbedrer lastetid og First Contentful Paint.
Å velge riktig (defer for ordnede DOM-avhengige appscripts, async for brannskudd tredjepartsscripts) unngår både treg lasting og rekkefølgeavhengighetsfeil.