`defer` na `async` zinabadilisha **wakati** script ya nje ` ``` ## Mstari wa wakati wenye picha ```text Normal: parse──stop──[download+exec]──parse──────── (slowest) async: parse──────────────────exec──parse──────── (runs whenever it arrives) defer: parse───────────────────────────parse──exec (after parsing, before DOMContentLoaded) ``` ## Tofauti kuu | | `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 | ## Wakati wa kutumia gani - **`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. ```html ``` **Kumbuka:** zote mbili zinatumika tu kwenye scripts za *nje* (`src`); zinachukuliwa kwa upuuzi kwenye scripts za inline. ES modules (`type="module"`) zinachelewa kwa chaguomsingi. ## Kwa nini inahitajika 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.

HTML maswali