defer in async spremenita kdaj se zunanji <script> prenese in izvede glede na razčlenjevanje HTML-ja. Oba omogočita, da se skript prenese vzporedno brez blokade razčlenjevalnika — razlika je v času izvajanja.
html
defer in async spremenita kdaj se zunanji <script> prenese in izvede glede na razčlenjevanje HTML-ja. Oba omogočita, da se skript prenese vzporedno brez blokade razčlenjevalnika — razlika je v času izvajanja.
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 | |
|---|---|---|
| Prenos | vzporedno | vzporedno |
| Izvršitev | takoj ko je preneseno | po popolnem razčlenjevanju HTML-ja |
| Vrstni red ohranjen? | Ne (kdor je prej končan) | Da (vrstni red dokumenta) |
| Blokira razčlenjevalnik? | samo na kratko med izvršitvijo | nikoli |
defer — za skripte, ki se dotikajo DOM-a ali so odvisne drug od drugega/vrstnega reda (koda vaše aplikacije). Se izvršijo po tem, ko DOM obstaja, zaporedno, tik pred DOMContentLoaded.async — za neodvisne skripte tretjih oseb, ki niso odvisne od DOM-a ali drugih skriptov (analitika, oglasi). Vrstni red ni važen, izvršite jih čim prej.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Opomba: oba se nanašata samo na zunanje skripte (src); se zanemarjata na vgrajenih skriptah. ES moduli (type="module") so privzeto odloženi.
Uporaba defer/async preprečuje, da bi skripte blokiral razčlenjevanje HTML-ja, kar neposredno izboljša zmogljivost nalaganja in First Contentful Paint.
Izbira prave variante (defer za urejeno kodo aplikacije odvisno od DOM-a, async za neodvisne skripte tretjih oseb) se izogne počasnim nalaganjem in hroščem odvisnosti od vrstnega reda.