defer आणि async हे बाह्य <script> कधी HTML पार्सिंगच्या संदर्भात डाउनलोड आणि एक्जीक्यूट होते हे बदलतात. दोन्ही स्क्रिप्टला समांतरीय डाउनलोड करू देतात पार्सरला अवरोधित न करता — फरक म्हणजे एक्जीक्यूशनचा वेळ.
html
defer आणि async हे बाह्य <script> कधी HTML पार्सिंगच्या संदर्भात डाउनलोड आणि एक्जीक्यूट होते हे बदलतात. दोन्ही स्क्रिप्टला समांतरीय डाउनलोड करू देतात पार्सरला अवरोधित न करता — फरक म्हणजे एक्जीक्यूशनचा वेळ.
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 | |
|---|---|---|
| डाउनलोड | समांतरीय | समांतरीय |
| एक्जीक्यूट | डाउनलोड होताच | HTML पूर्णपणे पार्स झाल्यानंतर |
| क्रम जतन राहतो? | नाही (जो आधी संपेल) | हो (दस्तऐवज क्रम) |
| पार्सरला अवरोध? | फक्त exec दरम्यान थोडक्यात | कधीही नाही |
defer — डोमला स्पर्श करणार्या किंवा एकमेकांवर/क्रमावर अवलंबून असणार्या स्क्रिप्ट्ससाठी (तुमचा अॅप कोड). ते डोम अस्तित्वात आल्यानंतर, क्रमाने, DOMContentLoaded च्या अगदी आधी चालतात.async — स्वतंत्र तृतीय-पक्ष स्क्रिप्ट्ससाठी जे डोम किंवा इतर स्क्रिप्ट्सवर अवलंबून नाहीत (विश्लेषण, विज्ञापन). क्रम महत्वाचा नाही, त्यांना लगेच चालू करा.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
टीप: दोन्ही फक्त बाह्य स्क्रिप्ट्सला लागू होतात (src); ते इनलाइन स्क्रिप्ट्सवर दुर्लक्ष केले जातात. ES मॉड्यूल्स (type="module") डिफॉल्टने विलंबित असतात.
defer/async वापरल्याने स्क्रिप्ट्स HTML पार्सिंगला अवरोधित होण्यापासून रोखतात, जे लोड परफॉर्मन्स आणि First Contentful Paint ला थेट सुधारते.
योग्य निवडणे (defer क्रमित डोम-अवलंबी अॅप कोडसाठी, async फायर-अँड-फॉरगेट तृतीय-पक्ष स्क्रिप्ट्ससाठी) हळू लोड आणि क्रम-अवलंबन बग्ससह टाळते.