defer ir async keičia kada išorinis <script> atsisiunčiamas ir vykdomas, palyginti su HTML analizavimu. Abu leidžia skriptui atsisiųsti lygiagrečiai nenutraukiant analizavimo — skirtumas yra vykdymo laikas.
html
defer ir async keičia kada išorinis <script> atsisiunčiamas ir vykdomas, palyginti su HTML analizavimu. Abu leidžia skriptui atsisiųsti lygiagrečiai nenutraukiant analizavimo — skirtumas yra vykdymo laikas.
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 | |
|---|---|---|
| Atsisiuntimas | lygiagretis | lygiagretis |
| Vykdymas | iš karto atsisiuntus | baigus visiškai analizuoti HTML |
| Tvarka išsaugota? | Ne (kas pirmas baigsis) | Taip (dokumento tvarka) |
| Stabdo analizatorių? | tik trumpam vykdymo metu | niekada |
defer — skriptams, kurie liečia DOM arba priklauso vienas nuo kito/nuo tvarkos (jūsų programos kodas). Jie vykdomi po to, kai DOM egzistuoja, nuosekliai, nedaug prieš DOMContentLoaded.async — nepriklausomiems trečiųjų šalių skriptams, kurie nepriklauso nuo DOM arba kitų skriptų (analitika, skelbimai). Tvarka nesvarbi, vykdykite juos kaip galima greičiau.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Pastaba: abu taikomi tik išoriniams skriptams (src); jie nepaisomi inline skriptuose. ES moduliai (type="module") yra atidėti pagal numatytuosius nustatymus.
defer/async naudojimas nuo skriptų apsaugo HTML analizavimą, o tai tiesiogiai pagerina įkėlimo veikimą ir First Contentful Paint.
Pasirinkus tinkamą (defer sutvarkytam nuo DOM priklausomam programos kodui, async fire-and-forget trečiųjų šalių skriptams) išvengiama lėto įkėlimo ir tvarkos priklausomybės klaidų.