A defer és az async megváltoztatja, hogy egy külső <script> mikor töltődik le és hajtódik végre a HTML-elemzéshez viszonyítva. Mindkettő lehetővé teszi, hogy a script párhuzamosan töltődjön le az elemzőt blokkolása nélkül — a különbség az végrehajtás időzítésében van.
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 | |
|---|---|---|
| Letöltés | párhuzamos | párhuzamos |
| Végrehajtás | amint letöltődik | a HTML teljes elemzése után |
| Sorrend megőrzött? | Nem (amelyik előbb kész) | Igen (dokumentum sorrend) |
| Blokkolja az elemzőt? | röviden a végrehajtás alatt | soha |
defer — olyan scriptekhez, amelyek megérintik a DOM-ot vagy egymástól/sorrendtől függnek (az alkalmazás kódja). A DOM után futnak, sorrendben, közvetlenül a DOMContentLoaded előtt.async — független harmadik féltől származó scriptekhez, amelyek nem függenek a DOM-tól vagy más scriptektől (analitika, hirdetések). A sorrend nem számít, futtasd őket ASAP.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Megjegyzés: mindkettő csak külső scriptekre vonatkozik (src); beépített scripteken figyelmen kívül hagyja őket. Az ES modulok (type="module") alapértelmezés szerint késleltetett.
A defer/async használata megakadályozza, hogy a scriptek blokkolják a HTML-elemzést, amely közvetlenül javítja a betöltési teljesítményt és a First Contentful Paint-t.
A megfelelő kiválasztás (defer a rendezett DOM-függő alkalmazás kódhoz, async a tüz-és-felejtsd el harmadik féltől származó scriptekhez) megakadályozza a lassú betöltéseket és a sorrendfüggő hibákat.