क्या मुझे स्क्रिप्ट पर स्थगित करना चाहिए जो पहले से ही नीचे के बॉडी टैग से पहले ही है?

Question

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

• जेएस फाइलों पर defer का उपयोग करना जो पहले से ही नीचे हैं, कोई फर्क पड़ता है?
• क्या शरीर टैग अवरुद्ध करने से ठीक पहले अंत में गैर स्थगित स्क्रिप्ट हैं?

मेरे पास एक और सवाल यह है कि अगर मैं सभी जेएस फ़ाइल को सिर में डालता हूं और defer का उपयोग करता हूं। क्या यह नीचे सभी जेएस फाइलों को रखने के बराबर होगा? head में डिफर के साथ जेएस को देखकर ब्राउजर सर्वर से अनुरोध करता है और फिर बाकी एचटीएमएल फाइल डाउनलोड करना जारी रखता है या क्या यह सभी एचटीएमएल और सीएसएस डाउनलोड करने के बाद ही सर्वर से अनुरोध करेगा?

जहां तक ​​मुझे पता है asyncdefer के बराबर है और केवल अंतर यह है कि फाइलों के क्रम के बिना डाउनलोड किए जाने पर जेएस निष्पादित किया जाएगा। तो,

• js फ़ाइलें जो पहले से ही तल पर हैं वे किस क्रम में क्रियान्वित कर रहे हैं से छोड़कर कोई फर्क पर async का उपयोग कर सकते हैं?

Answer 1

जो आप खोज रहे हैं वह ब्राउज़र कार्यक्षमता है जो यह जानने के लिए है कि डोम पूरी तरह से लोड हो गया है या नहीं। MDN से:

<script> 
    document.addEventListener("DOMContentLoaded", function(event) { 
    console.log("DOM fully loaded and parsed"); 
    }); 
</script> 

तो फिर आप अपने जावास्क्रिप्ट जहाँ है, क्योंकि इसकी मार डाला जब डोम पूरी तरह से

Answer 2

आस्थगित करें विशेषता भरी हुई है एक बूलियन विशेषता है डाल सकते हैं।

जब वर्तमान में, यह निर्दिष्ट करता है कि स्क्रिप्ट जब पेज पार्स समाप्त हो गया है निष्पादित किया जाता है।

नोट: आस्थगित करें विशेषता केवल बाहरी स्क्रिप्ट के लिए (केवल इस्तेमाल किया जाना चाहिए अगर src विशेषता मौजूद है) है।

Answer 3

स्क्रिप्टिंग के लिए HTML 5.2 spec के माध्यम से देखने से, this illustration W3C का उपयोग करता है पाता है।

हम यहां क्या देखते हैं कि defer का उपयोग करके स्क्रिप्ट प्राप्त होता है जबकि HTML को पार्स किया जा रहा है, लेकिन निष्पादन से पहले पार्सिंग निष्कर्ष निकाला जाता है।

async, दूसरी तरफ, पार्सिंग के साथ मिलते हैं, और एक बार fetch पूरा हो जाने पर, HTML प्रतिपादन को स्क्रिप्ट निष्पादित करने के लिए रोक दिया जाता है।

के बाद से एचटीएमएल निष्पादन तुल्यकालिक है, एक मान सकते हैं कि सिर्फ </head> के समक्ष रखा स्क्रिप्ट पर defer का उपयोग कर लगभग उन्हें सिर्फ </body> से पहले रखने जैसा होगा।

हालांकि, Chris Moschini राज्यों के रूप में, मुझे defer पर भरोसा नहीं होगा। मुझे लगता है कि this संपूर्ण रूप से स्टैक ओवरफ्लो उत्तर बेहतर ढंग से समझाएगा कि defer जावाScripts लोड करने को प्रभावित करता है।