defer agus async an athrú cathain a dhéantar fothúnscript <script> a dhílonnú agus a chur i bhfeidhm i gcomparáid le parsáil HTML. Ligeann an dá cheann do script a dhílonnú go comhthreomhar gan an parsálaí a bhlocáil — is é an difríochtaí amanna an fhorghníomhaithe.
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 | |
|---|---|---|
| Íoslódáil | comhthreomhar | comhthreomhar |
| Forghníomhaítear | chomh luath agus a dhílonntar | tar éis parsáil iomlán HTML |
| Ordú caomhnaithe? | Uimh (cibé ceann a bhíonn críochnaithe ar dtús) | Sea (ord an doiciméid) |
| Blocálann an parsálaí? | go gairid le linn forghníomhaithe | riamh |
defer — i gcás scripts a bhíonn i ngnó ag an DOM nó atá ag brath ar a chéile/ar an ordú (do chód an app). Ritheann siad tar éis go bhfuil an DOM ann, go seicheamhach, díreach roimh DOMContentLoaded.async — i gcás scripts tríú páirtí neamhspleácha nach bhfuil ag brath ar an DOM ná ar scripts eile (anailís, fógraí). Ní bhraistear don ordú, ritheann siad chomh tapaidh agus is féidir.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Nóta: ní bhaineann an dá cheann ach le scripts seachtrach (src) ; déantar neamhaird orthu ar scripts iniata. Tá modúil ES (type="module") curtha ar athlá de réir réamhshocrú.
A úsáid defer/async coimeádann scripts ó bhlocáil parsáil HTML, a bhíonn feabhas dhíreach ar fheidhmíochta uachta agus ar First Contentful Paint.
An ceann ceart a roghnú (defer do chód app ordaithe ag brath ar DOM, async do scripts tríú páirtí gan iompar) seachaint ar dhá thaobh ar bhailí mall agus ar bhoganna ó bhraith ordú.