वेब विकास की दुनिया में, पेज लोड समय को अनुकूलित करना महत्वपूर्ण है।

मूल बातें: स्क्रिप्ट कैसे लोड होती हैं

डिफ़ॉल्ट रूप से, जब कोई ब्राउज़र किसी

1. HTML पार्सिंग रोक देता है
2. स्क्रिप्ट डाउनलोड करता है
3. स्क्रिप्ट निष्पादित करता है
4. HTML पार्सिंग फिर से शुरू करता है

यह प्रक्रिया पेज रेंडरिंग को धीमा कर सकती है, खासकर बड़ी स्क्रिप्ट या धीमे कनेक्शन के लिए। इसके अतिरिक्त, यदि स्क्रिप्ट कुछ HTML तत्वों के पूरी तरह से लोड होने से पहले चलती है तो इससे बग हो सकते हैं, जो अक्सर तब होता है जब स्क्रिप्ट को दस्तावेज़ में सही ढंग से नहीं रखा जाता है।

Async और Defer: एक दोधारी तलवार

Async

• यह क्या करता है: HTML पार्सिंग जारी रहने के दौरान स्क्रिप्ट को एसिंक्रोनस रूप से डाउनलोड करता है।
• जब यह निष्पादित होता है: जैसे ही यह डाउनलोड होता है, HTML पार्सिंग को रोक दिया जाता है।
• जब इसका उपयोग किया जाता है: स्वतंत्र स्क्रिप्ट जो अन्य स्क्रिप्ट या DOM सामग्री पर निर्भर नहीं होती हैं।
• चेतावनी: क्रम से बाहर निष्पादित हो सकता है, संभावित रूप से निर्भरता टूट सकती है।

आस्थगित करें

• यह क्या करता है: HTML पार्सिंग जारी रहने के दौरान स्क्रिप्ट डाउनलोड करता है।
• जब यह निष्पादित होता है: HTML पार्सिंग पूरी होने के बाद, लेकिन DOMContentLoaded ईवेंट से पहले।
• जब इसका उपयोग किया जाता है: स्क्रिप्ट जो DOM सामग्री पर निर्भर होती हैं या जिन्हें एक विशिष्ट क्रम में निष्पादित करने की आवश्यकता होती है।
• चेतावनी: महत्वपूर्ण कार्यक्षमता के निष्पादन में देरी हो सकती है।

व्यवहार की तुलना करना

निष्पादन का क्रम: Async, Defer, और दोनों

विभिन्न विशेषताओं वाली स्क्रिप्ट के निष्पादन के क्रम को समझना निर्भरता के प्रबंधन और उचित कार्यक्षमता सुनिश्चित करने के लिए महत्वपूर्ण है। यह ऐसे काम करता है:

1. नियमित स्क्रिप्ट (कोई एसिंक या स्थगित नहीं):

   • दस्तावेज़ में दिखाई देने वाले क्रम में निष्पादित करें।
   • HTML पार्सिंग को तब तक ब्लॉक करें जब तक वे डाउनलोड और निष्पादित न हो जाएं।

2. Async स्क्रिप्ट:

   • समानांतर में डाउनलोड करें और उपलब्ध होते ही निष्पादित करें।
   • निष्पादन का कोई गारंटीकृत आदेश नहीं; डाउनलोड होते ही वे चलने लगते हैं।
   • DOM पूरी तरह से लोड होने से पहले निष्पादित हो सकता है।

3. स्क्रिप्ट स्थगित करें:

   • समानांतर में डाउनलोड करें लेकिन HTML पार्सिंग पूरी होने के बाद ही निष्पादित करें।
   • दस्तावेज़ में दिखाई देने वाले क्रम में निष्पादित करें।
   • DOMContentLoaded ईवेंट से पहले चलाएँ।

4. एसिंक और डेफ़र दोनों वाली स्क्रिप्ट:

   • आधुनिक ब्राउज़र में async विशेषता को प्राथमिकता दी जाती है।
   • पुराने ब्राउज़रों में जो एसिंक का समर्थन नहीं करते हैं, वे व्यवहार को स्थगित कर देते हैं।

उदाहरण निष्पादन आदेश:

संभावित निष्पादन आदेश:

1. 1.js (ब्लॉक पार्सिंग)
2. 3.js या 2.js (जो भी पहले डाउनलोड हो)
3. 2.js या 3.js (जो भी दूसरा डाउनलोड हो)
4. 4.जेएस
5. 5.जेएस

ध्यान दें कि यदि 1.जेएस को डाउनलोड होने में अधिक समय लगता है तो 2 और 3 किसी भी क्रम में या 1 से पहले भी निष्पादित हो सकते हैं।

सर्वोत्तम प्रथाएं

1. एनालिटिक्स जैसी स्वतंत्र स्क्रिप्ट के लिए async का उपयोग करें।
2. उन स्क्रिप्ट के लिए defer का उपयोग करें जो DOM या अन्य स्क्रिप्ट पर निर्भर हैं।
3. स्क्रिप्ट को जल्दी डाउनलोड शुरू करने के लिए में async के साथ रखें या स्थगित करें।
4. महत्वपूर्ण स्क्रिप्ट के लिए, में इनलाइन स्क्रिप्ट पर विचार करें।

ब्राउज़र समर्थन

async और defer दोनों आधुनिक ब्राउज़रों में व्यापक रूप से समर्थित हैं। पुराने ब्राउज़र के लिए, स्क्रिप्ट लोडर का उपयोग करने या स्क्रिप्ट को