defer a async mění kdy se externí <script> stáhne a spustí relativně k analýze HTML. Oba umožňují stažení skriptu paralelně bez blokování parseru — rozdíl je v čase spuštění.
html
defer a async mění kdy se externí <script> stáhne a spustí relativně k analýze HTML. Oba umožňují stažení skriptu paralelně bez blokování parseru — rozdíl je v čase spuštění.
Normal: parse──stop──[download+exec]──parse──────── (slowest)
async: parse──────────────────exec──parse──────── (runs whenever it arrives)
defer: parse───────────────────────────parse──exec (after parsing, before DOMContentLoaded)
defer — pro skripty, které se dotýkají DOM nebo na sobě závisejí/jsou na pořadí (váš app kód). Spustí se po tom, co DOM existuje, postupně, těsně před DOMContentLoaded.async — pro nezávislé third-party skripty, které nezávisí na DOM nebo jiných skriptech (analytics, reklamy). Pořadí nezáleží, spusťte je co nejdřív.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Poznámka: oba se vztahují pouze na externí skripty (src); u inline skriptů jsou ignorovány. ES moduly (type="module") jsou ve výchozím stavu odloženy.
Verze defer/async brání skriptům v blokování parsování HTML, což přímo zlepšuje výkon načítání a First Contentful Paint.
Volba správné varianty (defer pro seřazený DOM-závislý app kód, async pro fire-and-forget third-party skripty) vyhnete se jak pomalému načítání, tak chybám na základě pořadí závislostí.
async | defer |
|---|
| Stažení | paralelně | paralelně |
| Spuštění | jakmile se stáhne | po plném parsování HTML |
| Pořadí zachováno? | Ne (kdo skončí první) | Ano (pořadí v dokumentu) |
| Blokuje parser? | jen krátce během spuštění | nikdy |