defer da async suna canja lokacin da external <script> ya saukar da a bugi mulwowa na HTML. Dukansu suna ba script damar saukar a jiya-jiya ba tare da dakatar da mai binciken — bambancin shi ne lokacin aiwatarwa.
html
defer da async suna canja lokacin da external <script> ya saukar da a bugi mulwowa na HTML. Dukansu suna ba script damar saukar a jiya-jiya ba tare da dakatar da mai binciken — bambancin shi ne lokacin aiwatarwa.
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 | |
|---|---|---|
| Saukarwa | jiya-jiya | jiya-jiya |
| Aiwatarwa | da wuri-wuri kamar saukarwa | bayan rikodewa gaba daya na HTML |
| Tsari na lallata? | Yalwa (wanda ya kammala ba daya) | I (tsarin horon) |
| Dakatar mai binciken? | kaɗan kalau aiwatarwa | jiya ba |
defer — ga scripts da suka shafi DOM ko suna dogara ga juna/tsari (lambar aikin ku). Suna gudana bayan DOM ya kasance, a jeri, kafin DOMContentLoaded.async — ga sakay na ƙungiya ta uku na scripts waɗanda ba suna dogara ga DOM ba ko sauran scripts (bincike, tallace-tallace). Tsari ba ya isa, gudana su ba don gida.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Sanarwa: dukansu kawai ana amfani da shi a waje scripts (src) kaɗai; ana watse shi a kan scripts na inline. ES modules (type="module") an dafarar su ta bada dadi.
Amfani da defer/async yana bayar da damar scripts daga dakatar da binciken HTML, wanda yake direkta inganta aikin loadin da First Contentful Paint.
Zabar daidai (defer don koodadden app da tsari da suka dogara DOM, async don scripts na ƙungiya ta uku) yana gwarewa kudu jiya-jiya loadin da tsari-dogara cucci.