defer și async schimbă când un <script> extern este descărcat și executat în raport cu parsarea HTML. Ambele permit descărcarea script-ului în paralel fără a bloca parserul — diferența se află în momentul execuției.
html
defer și async schimbă când un <script> extern este descărcat și executat în raport cu parsarea HTML. Ambele permit descărcarea script-ului în paralel fără a bloca parserul — diferența se află în momentul execuției.
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 | |
|---|---|---|
| Descărcare | paralel | paralel |
| Se execută | imediat după descărcare | după ce HTML este complet analizat |
| Ordinea păstrată? | Nu (oricine termină primul) | Da (ordinea documentului) |
| Blochează parserul? | doar pe scurt în timpul execuției | niciodată |
defer — pentru script-uri care ating DOM sau depind unele de altele/ordine (codul aplicației). Se execută după ce DOM există, în secvență, chiar înainte de DOMContentLoaded.async — pentru script-uri independente de terți care nu depind de DOM sau alte script-uri (analytics, anunțuri). Ordinea nu contează, rulează-le ASAP.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Notă: ambele se aplică doar la script-urile externe (src); sunt ignorate în script-urile inline. Module ES (type="module") sunt amânate implicit.
Folosirea defer/async ține script-urile departe de a bloca parsarea HTML, ceea ce îmbunătățește direct performanța de încărcare și First Contentful Paint.
Alegerea celei corecte (defer pentru codul aplicației ordonat dependent de DOM, async pentru script-uri terțe fire-and-forget) evită atât încărcările lente, cât și bug-urile de dependență de ordine.