defer i async mijenjaju kada se vanjski <script> preuzima i izvršava u odnosu na analizu HTML-a. Oba dopuštaju skriptu da se preuzmé paralelno bez blokiranja parsera — razlika je u vremenskom trenutku izvršavanja.
html
defer i async mijenjaju kada se vanjski <script> preuzima i izvršava u odnosu na analizu HTML-a. Oba dopuštaju skriptu da se preuzmé paralelno bez blokiranja parsera — razlika je u vremenskom trenutku izvršavanja.
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 | |
|---|---|---|
| Preuzimanje | paralelno | paralelno |
| Izvršava se | čim se preuzme | nakon što se HTML potpuno analizira |
| Redoslijed sačuvan? | Ne (koji god se završi prvi) | Da (redoslijed dokumenta) |
| Blokira parser? | samo ukratko tijekom izvršavanja | nikad |
defer — za skripte koje dodiruju DOM ili ovise jednu o drugoj/redoslijedu (vaš kod aplikacije). Izvršavaju se nakon što DOM postoji, redom, neposredno prije DOMContentLoaded.async — za neovisne skripte trećih strana koje ne ovise o DOM-u ili drugim skriptama (analitika, oglasi). Redoslijed nije bitan, pokreni ih što prije.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Napomena: oba se primjenjuju samo na vanjske skripte (src); ignorirani su na ugrađenim skriptama. ES moduli (type="module") su odloženi prema zadanom postavkom.
Korištenje defer/async sprječava skripte da blokiraju analizu HTML-a, što izravno poboljšava performanse učitavanja i First Contentful Paint.
Odabir ispravnog (defer za poredane kod aplikacije ovisan o DOM-u, async za skripte trećih strana „ispaliti i zaboraviti") izbjegava i spora učitavanja i greške koje ovise o redoslijedu.