defer och async ändrar när ett externt <script> hämtas och körs i relation till HTML-parsning. Båda låter skriptet hämtas parallellt utan att blockera parsern — skillnaden är i körningstidpunkten.
html
defer och async ändrar när ett externt <script> hämtas och körs i relation till HTML-parsning. Båda låter skriptet hämtas parallellt utan att blockera parsern — skillnaden är i körningstidpunkten.
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 | |
|---|---|---|
| Hämtning | parallellt | parallellt |
| Körs | så snart det hämtas | efter HTML är helt parsad |
| Ordning bevarad? | Nej (vem som blir klar först) | Ja (dokumentordning) |
| Blockerar parser? | bara kort under körning | aldrig |
defer — för skript som berör DOM eller är beroende av varandra/ordningen (din app-kod). De körs efter DOM existerar, i sekvens, strax före DOMContentLoaded.async — för oberoende skript från tredje part som inte är beroende av DOM eller andra skript (analitik, annonser). Ordning spelar ingen roll, kör dem ASAP.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Notering: båda gäller endast externa skript (src); de ignoreras på inline-skript. ES-moduler (type="module") är uppskjutna som standard.
Att använda defer/async förhindrar att skript blockerar HTML-parsning, vilket direkt förbättrar laddningsprestanda och First Contentful Paint.
Att välja rätt (defer för ordnad DOM-beroende app-kod, async för oberoende tredjepartsSkript) undviker både långsamma laddningar och ordningsberoendefel.