defer og async ændrer hvornår et eksternt <script> downloades og udføres i forhold til HTML-parsing. Begge gør det muligt for scriptet at downloade parallelt uden at blokere parser'en — forskellen ligger i udførelsestidspunktet.
html
defer og async ændrer hvornår et eksternt <script> downloades og udføres i forhold til HTML-parsing. Begge gør det muligt for scriptet at downloade parallelt uden at blokere parser'en — forskellen ligger i udførelsestidspunktet.
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 |
| Udføres | så snart det er downloadet | efter HTML er fuldt parsed |
| Rækkefølge bevaret? | Nej (hvad der færdiggøres først) | Ja (dokumentrækkefølge) |
| Blokerer parser? | kun kort under udførelse | aldrig |
defer — for scripts der manipulerer DOM'en eller er afhængige af hinanden/rækkefølge (din app-kode). De køres efter DOM'en eksisterer, sekventielt, lige før DOMContentLoaded.async — for uafhængige third-party scripts der ikke afhænger af DOM'en eller andre scripts (analytics, annoncer). Rækkefølge betyder ikke noget, kør dem så hurtigt som muligt.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Bemærk: begge gælder kun eksterne scripts (src); de ignoreres på inline scripts. ES modules (type="module") er deferred som standard.
Brug af defer/async forhindrer scripts i at blokere HTML-parsing, hvilket direkte forbedrer load-ydeevne og First Contentful Paint.
At vælge den rigtige (defer for ordnet DOM-afhængig app-kode, async for fire-and-forget third-party scripts) undgår både langsomme load-tider og ordre-afhængigheds-fejl.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér