HTML Academy · पाठ

async और defer एट्रिब्यूट

HTML पार्सिंग को रोके बिना स्क्रिप्ट लोड करें

पाठ 1, कुल 4 में से13 चरण

async और defer एट्रिब्यूट, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

डिफ़ॉल्ट स्क्रिप्ट व्यवहार

async या defer के बिना एक साधारण <script src="..."> डाउनलोड और निष्पादन के दौरान HTML पार्सिंग को रोक देता है। स्क्रिप्ट के नीचे की सभी सामग्री का रेंडर रुक जाता है, इसलिए परंपरागत रूप से स्क्रिप्ट <body> के अंत में रखी जाती थीं।

async समानांतर रूप से डाउनलोड करता है

<script async src="..."> HTML पार्सिंग के साथ-साथ स्क्रिप्ट को डाउनलोड करता है और उसके पहुँचते ही निष्पादित करता है। निष्पादन के दौरान HTML पार्सिंग अब भी रुकती है, लेकिन केवल थोड़े समय के लिए — स्क्रिप्ट अन्य संसाधनों के डाउनलोड को नहीं रोकती।

async का निष्पादन क्रम अनिश्चित होता है

दो async स्क्रिप्ट उस क्रम में चलती हैं जिसमें उनका डाउनलोड पहले पूरा होता है। ऐसी स्क्रिप्ट के लिए async का उपयोग कभी न करें जो एक-दूसरे पर निर्भर हों (jQuery प्लगइन से पहले jQuery), क्योंकि आवश्यक पूर्वापेक्षा उपलब्ध होने से पहले निर्भरता चल सकती है।

defer HTML की प्रतीक्षा करता है

<script defer src="..."> async की तरह समानांतर रूप से डाउनलोड होता है, लेकिन इसका निष्पादन HTML के पूरी तरह पार्स होने तक — DOMContentLoaded इवेंट से ठीक पहले — टल जाता है। यह स्क्रिप्ट पार्सिंग को कभी नहीं रोकती।

<script defer src="app.js"></script>
<script defer src="analytics.js"></script>

defer क्रम बनाए रखता है

कई defer स्क्रिप्ट अपनी घोषणा के क्रम में निष्पादित होती हैं, ठीक वैसे ही जैसे body के अंत में रखी गई सामान्य स्क्रिप्ट। इससे निर्भर स्क्रिप्ट के लिए defer सही विकल्प बन जाता है: उपयोग करने वाली स्क्रिप्ट से पहले उपयोगिता स्क्रिप्ट लोड हो जाती हैं, और मैन्युअल समन्वय की आवश्यकता नहीं होती।

async और defer में चयन

ऐसे स्वतंत्र तृतीय-पक्ष स्निपेट (विश्लेषण, विज्ञापन) के लिए async का उपयोग करें जो DOM को नहीं छूते और जिनकी कोई निर्भरता नहीं होती। अपने ऐसे एप्लिकेशन कोड के लिए defer का उपयोग करें जिसे DOM की आवश्यकता हो और जो अन्य स्क्रिप्ट पर निर्भर हो।

मॉड्यूल डिफ़ॉल्ट रूप से defer होते हैं

<script type="module"> अपने-आप defer की तरह व्यवहार करता है — यह समानांतर रूप से डाउनलोड होता है, पार्सिंग के बाद निष्पादित होता है और क्रम बनाए रखता है। मॉड्यूल में defer जोड़ना अनुमत है, लेकिन अनावश्यक; async जोड़ने पर व्यवहार फिर async जैसा हो जाता है।

इनलाइन स्क्रिप्ट async/defer को अनदेखा करती हैं

async और defer केवल बाहरी स्क्रिप्ट (src वाली) पर लागू होते हैं। इनलाइन <script> टैग एट्रिब्यूट की परवाह किए बिना तुरंत निष्पादित होता है, इसलिए <script>console.log(1)</script> के लिए ये एट्रिब्यूट चुपचाप अनदेखे कर दिए जाते हैं।

स्थान अब कम महत्वपूर्ण है

defer (या मॉड्यूल) के साथ <script> टैग पार्सिंग को रोके बिना <head> में रह सकते हैं — और उन्हें वहाँ रखने से ब्राउज़र उन्हें खोजकर <body> के अंत की तुलना में पहले डाउनलोड करना शुरू कर सकता है।

<head>
  <script defer src="app.js"></script>
</head>

preload के साथ संयोजन

विलंबता-संवेदनशील स्क्रिप्ट के लिए हेड में <link rel="preload" as="script" href="..."> को नीचे दी गई defer स्क्रिप्ट के साथ रखें। preload तुरंत डाउनलोड शुरू करता है, जबकि defer यह सुनिश्चित करता है कि निष्पादन क्रम सही रहे।

सामान्य समस्या

यह सत्यापित किए बिना किसी स्क्रिप्ट को async चिह्नित करना कि उसकी कोई निर्भरता नहीं है, "मेरी मशीन पर चलता है, उत्पादन में खराब हो जाता है" जैसी रेस स्थितियों का सबसे आम कारण है। संदेह होने पर defer को प्राथमिकता दें — जहाँ async कठोर होता है, वहाँ यह अधिक क्षमाशील है।

ज्ञान जाँच

ऐसी दो स्क्रिप्ट के लिए async और defer में क्या अंतर है जिनमें दूसरी स्क्रिप्ट पहली पर निर्भर है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

async और defer दोनों HTML पार्सिंग के साथ-साथ स्क्रिप्ट डाउनलोड करते हैं। async पहुँचते ही अनिश्चित क्रम में निष्पादित होता है — इसका उपयोग स्वतंत्र तृतीय-पक्ष स्निपेट के लिए करें। defer पार्सिंग के बाद घोषणा के क्रम में निष्पादित होता है — इसका उपयोग निर्भरता वाले एप्लिकेशन कोड के लिए करें। मॉड्यूल डिफ़ॉल्ट रूप से defer जैसा व्यवहार करते हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “async और defer एट्रिब्यूट” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “async और defer एट्रिब्यूट” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“async और defer एट्रिब्यूट” में मैं क्या सीखूँगा?

HTML पार्सिंग को रोके बिना स्क्रिप्ट लोड करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“async और defer एट्रिब्यूट” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ