defer na async zinabadilisha wakati script ya nje <script> inapakua na kutekeleza ikilinganishwa na HTML parsing. Zote mbili zinakataa script ipakie sambamba bila kuuzuia parser — tofauti ni katika wakati wa utekelezaji.
html
defer na async zinabadilisha wakati script ya nje <script> inapakua na kutekeleza ikilinganishwa na HTML parsing. Zote mbili zinakataa script ipakie sambamba bila kuuzuia parser — tofauti ni katika wakati wa utekelezaji.
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 | |
|---|---|---|
| Upakuaji | sambamba | sambamba |
| Kutekeleza | haraka baada ya kupakua | baada ya HTML kuwa umechambuliwa kabisa |
| Mpangilio umelindwa? | Hapana (yeyote anayemalizia kwanza) | Ndiyo (mpangilio wa hati) |
| Uzuizo wa parser? | kwa muda mfupi tu wakati wa utekelezaji | kamwe |
defer — kwa scripts ambayo hugusa DOM au hutegemea kila mmoja/mpangilio (code yako ya programu). Wanatekeleza baada ya DOM kuwepo, katika mlolongo, tu kabla ya DOMContentLoaded.async — kwa scripts huru za wahusika wa tatu ambazo hazitegemei DOM au scripts nyingine (uchambuzi, matangazo). Mpangilio haufiki, zitekeleze hivi karibuni.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Kumbuka: zote mbili zinatumika tu kwenye scripts za nje (src); zinachukuliwa kwa upuuzi kwenye scripts za inline. ES modules (type="module") zinachelewa kwa chaguomsingi.
Kutumia defer/async kuzuia scripts kutochelewa HTML parsing, ambayo moja kwa moja inaboeza utendaji wa upakuaji na First Contentful Paint.
Kuchagua sahihi (defer kwa code ya programu iliyoamriwa inayotegemea DOM, async kwa scripts huru za wahusika wa tatu) huepuka upakuaji wa polepole na matatizo ya utegemezi wa mpangilio.