defer u async jibdlu meta skrip esterni <script> tniżżel u teżegwixxi relattiv għall-parsing tal-HTML. It-tnejn jippermettu lill-skrip jiniżżel in parallel mingħajr ma jblokka l-parser — id-differenza hija l-ħin tal-eżekuzzjoni.
html
defer u async jibdlu meta skrip esterni <script> tniżżel u teżegwixxi relattiv għall-parsing tal-HTML. It-tnejn jippermettu lill-skrip jiniżżel in parallel mingħajr ma jblokka l-parser — id-differenza hija l-ħin tal-eżekuzzjoni.
Normal: parse──stop──[download+exec]──parse──────── (slowest)
async: parse──────────────────exec──parse──────── (runs whenever it arrives)
defer: parse───────────────────────────parse──exec (after parsing, before DOMContentLoaded)
defer — għal skrips li jittuċċaw il-DOM jew li jiddependu fuq xulxin/ordni (il-kodiċi ta' applikazzjoni tiegħek). Dawn jeżegwixxi wara li l-DOM jeżisti, b'ordni, ftit qabel DOMContentLoaded.async — għal skrips ta' terza parti indipendenti li ma jiddependux fuq il-DOM jew skrips oħra (analitiċi, reklami). L-ordni ma importax, eżegwixxi huma kif jista' jkun malajr.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Nota: it-tnejn japplikaw biss għal skrips esterni (src); huma jigħu injurati fuq skrips inline. Moduli ES (type="module") huma mideferred b'mod default.
L-użu ta' defer/async jipprevjeni lill-skrips minn ma jblokka l-parsing tal-HTML, li direttament itejjeb il-prestazzjoni tal-load u l-First Contentful Paint.
L-għażla ta' dik it-tajba (defer għal kodiċi ta' applikazzjoni b'ordni dipendenti minn DOM, async għal skrips ta' terza parti fire-and-forget) tevita ambedu ċ-ċarigi bil-mod u il-bugs ta' dipendenza tal-ordni.
async | defer |
|---|
| Niżżel | parallel | parallel |
| Eżegwixxi | hekk-il darba jkun niżżel | wara li l-HTML ikun pjwn analiżat |
| L-ordni miżmuma? | Le (min li jaqbad l-ewwel) | Iva (ordni tal-dokument) |
| Jblokka l-parser? | biss brievement matul l-exec | qatt |