defer dhe async ndryshojnë kur një skript i jashtëm <script> shkarkohet dhe ekzekutohet në raport me analizimin e HTML-it. Të dyja e lejojnë skripton të shkarkohet paralelisht pa bllokuar analizuesin — diferenca është në kohën e ekzekutimit.
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 | |
|---|---|---|
| Shkarkim | paralelisht | paralelisht |
| Ekzekutohet | sapo të shkarkohet | pasi të përfundojë analiza e HTML-it |
| Rendi i ruajtur? | Jo (kush përfundon më parë) | Po (rendi i dokumentit) |
| Bllokon analizuesin? | vetëm shkurtimisht gjatë ekzekutimit | asnjëherë |
defer — për skriptet që prekin DOM-in ose varen nga njëra-tjetra/rendi (kodi i aplikacionit tuaj). Ekzekutohen pasi DOM-i ekziston, në sekuencë, pikë përpara DOMContentLoaded.async — për skriptet të pavarura të palëve të treta që nuk varen nga DOM-i ose skriptet e tjera (analitika, reklama). Rendi nuk ka rëndësi, ekzekutojini sa më shpejt.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Shënim: të dyja zbatohen vetëm për skriptet të jashtme (src); injorohen në skriptet inline. Modulet ES (type="module") janë të shtyra si parazgjedhje.
Përdorimi i defer/async pengon skriptet nga bllokimi i analizimit të HTML-it, i cili direkt përmirëson performancën e ngarkimit dhe First Contentful Paint.
Zgjedhja e duhes (defer për kodin e aplikacionit të renditur të varur nga DOM-i, async për skriptet e pavarura të palëve të treta) shmang ngarkimet e ngadalta dhe gabimet e varësisë nga rendi.
Një bibliotekë pyetjesh intervistash IT me përgjigje të detajuara — nga Junior te Senior.
Dhuro