defer और async बदलते हैं कि बाहरी <script> HTML parsing के संबंध में कब download और execute होते हैं। दोनों स्क्रिप्ट को समानांतर में download करने देते हैं बिना parser को block किए — अंतर execution timing में है।
html
defer और async बदलते हैं कि बाहरी <script> HTML parsing के संबंध में कब download और execute होते हैं। दोनों स्क्रिप्ट को समानांतर में download करने देते हैं बिना parser को block किए — अंतर execution timing में है।
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 | |
|---|---|---|
| Download | समानांतर | समानांतर |
| Execute करता है | जितनी जल्दी download हो | HTML पूरी तरह parse होने के बाद |
| क्रम संरक्षित है? | नहीं (जो पहले पूरा हो) | हां (दस्तावेज़ क्रम) |
| Parser को block करता है? | execution के दौरान थोड़ा | कभी नहीं |
defer — ऐसी स्क्रिप्ट के लिए जो DOM को छूती हैं या एक दूसरे पर/क्रम पर निर्भर हैं (आपका app code)। ये DOM के अस्तित्व के बाद, क्रम में, DOMContentLoaded से पहले चलते हैं।async — स्वतंत्र third-party scripts के लिए जो DOM या अन्य scripts पर निर्भर नहीं हैं (analytics, ads)। क्रम महत्वपूर्ण नहीं है, जल्दी से चलाएं।<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
नोट: दोनों केवल बाहरी scripts (src) पर लागू होते हैं; inline scripts पर ignore किए जाते हैं। ES modules (type="module") डिफ़ॉल्ट रूप से deferred हैं।
defer/async का उपयोग scripts को HTML parsing को block करने से रोकता है, जो directly load performance और First Contentful Paint को बेहतर बनाता है।
सही चुनाव करना (defer ordered DOM-dependent app code के लिए, async fire-and-forget third-party scripts के लिए) धीमे loads और order-dependency bugs दोनों को रोकता है।