HTML में, जावास्क्रिप्ट फ़ाइल को शामिल करने के कई तरीके हैं। मैं चार अलग-अलग तरीकों, उनकी कमियों के बारे में बताऊंगा और अंत में, सर्वोत्तम दृष्टिकोण पर प्रकाश डालूंगा।

1. in

इस दृष्टिकोण में कोड को पार्स करते समय जावास्क्रिप्ट फ़ाइल को बॉडी के अंदर HTML से पहले लोड किया जाता है और यदि जावास्क्रिप्ट बॉडी में उन तत्वों में हेरफेर करने की कोशिश करता है जिन्हें अभी तक पार्स नहीं किया गया है, तो इससे त्रुटियां हो सकती हैं, क्योंकि HTML सामग्री पूरी तरह से पार्स नहीं हुई है लोड किया गया।

यह अवरुद्ध व्यवहार शेष पृष्ठ के पार्सिंग और रेंडरिंग में देरी करता है, जिससे प्रदर्शन और उपयोगकर्ता अनुभव प्रभावित होता है।

2. in

इस दृष्टिकोण में, जावास्क्रिप्ट को लोड और निष्पादित करने से पहले HTML को पूरी तरह से पार्स किया जाता है, जिससे लापता DOM तत्वों से संबंधित त्रुटियों को रोका जा सकता है। यह दृष्टिकोण बिल्कुल अच्छा है, लेकिन चूंकि HTML पार्सिंग और जावास्क्रिप्ट लोडिंग क्रमिक रूप से होती है, इसमें कुल मिलाकर अधिक समय लग सकता है, क्योंकि दोनों प्रक्रियाएं अलग-अलग समय पर होती हैं

3. in

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

4. in

यह दृष्टिकोण तीसरे के समान है, जहां HTML पार्सिंग और जावास्क्रिप्ट लोडिंग दोनों समानांतर में होते हैं। हालाँकि, भले ही जावास्क्रिप्ट पहले लोड हो, ब्राउज़र स्क्रिप्ट निष्पादित करने से पहले HTML पूरी तरह से पार्स होने तक प्रतीक्षा करता है

सारांश: सर्वोत्तम दृष्टिकोण

सबसे अच्छा तरीका आमतौर पर इसका उपयोग करना है:

स्क्रिप्ट>
क्यों:

• यह HTML पार्सिंग (नॉन-ब्लॉकिंग डाउनलोड) को ब्लॉक नहीं करता है।
• यह सुनिश्चित करता है कि DOM पूरी तरह से पार्स होने के बाद स्क्रिप्ट चलती है, जिससे यह DOM तत्वों में हेरफेर करने के लिए सुरक्षित हो जाता है।
• यदि आपके पास एकाधिक विलंबित स्क्रिप्ट हैं तो यह स्क्रिप्ट निष्पादन क्रम को सुरक्षित रखता है।

ऐसे मामलों में जहां स्क्रिप्ट DOM सामग्री से स्वतंत्र है (जैसे ट्रैकिंग स्क्रिप्ट या विज्ञापन), आप बेहतर प्रदर्शन के लिए async का उपयोग कर सकते हैं।