HTML में स्क्रिप्ट को एसिंक्रोनस रूप से कैसे निष्पादित करें?

HTML में बाहरी स्क्रिप्ट को एसिंक्रोनस (अतुल्यकालिक) रूप से निष्पादित करने के लिए async विशेषता का उपयोग किया जाता है। यह स्क्रिप्ट को पेज पार्सिंग को ब्लॉक किए बिना बैकग्राउंड में डाउनलोड और निष्पादित करने की अनुमति देता है।

कैसे काम करता है

• बिना async: HTML पार्सिंग रुकती है → स्क्रिप्ट डाउनलोड होती है → निष्पादित होती है → पार्सिंग जारी रहती है
• async के साथ: HTML पार्सिंग जारी रहती है → स्क्रिप्ट बैकग्राउंड में डाउनलोड होती है → डाउनलोड पूरा होने पर पार्सिंग रुकती है → स्क्रिप्ट निष्पादित होती है → पार्सिंग जारी रहती है
• defer के साथ: HTML पार्सिंग जारी रहती है → स्क्रिप्ट बैकग्राउंड में डाउनलोड होती है → पार्सिंग पूरा होने पर निष्पादित होती है

उदाहरण

सबसे पहले एक JS फ़ाइल बनाएं (new.js):

function sayHello() {
  alert("Hello World");
}

फिर HTML में इसका उपयोग करें:

<html>
  <head>
    <script src="new.js" async></script>
  </head>
  <body>
    <p>यह डेमो टेक्स्ट है।</p>
  </body>
</html>

async vs defer

सर्वोत्तम अभ्यास

• async का उपयोग स्वतंत्र थर्ड-पार्टी स्क्रिप्ट्स (Google Analytics, विज्ञापन) के लिए करें।
• defer का उपयोग अपनी साइट की स्क्रिप्ट्स के लिए करें जिन्हें DOM की आवश्यकता है।
• async केवल बाहरी स्क्रिप्ट्स (src विशेषता वाले) के लिए काम करता है।
• मॉड्यूल स्क्रिप्ट्स (type="module") डिफ़ॉल्ट रूप से defer की तरह व्यवहार करती हैं।