यहां तब होता है जब एक ब्राउज़र <script>उस पर टैग के साथ एक वेबसाइट लोड करता है:
- HTML पेज प्राप्त करें (जैसे index.html)
- HTML पार्स करना शुरू करें
- पार्सर
<script>एक बाहरी स्क्रिप्ट फ़ाइल को संदर्भित करने वाले टैग का सामना करता है ।
- ब्राउज़र स्क्रिप्ट फ़ाइल का अनुरोध करता है। इस बीच, पार्सर आपके पृष्ठ पर अन्य HTML को पार्स करना बंद कर देता है।
- कुछ समय बाद स्क्रिप्ट डाउनलोड की जाती है और बाद में निष्पादित की जाती है।
- पार्सर शेष HTML दस्तावेज़ को जारी रखता है।
चरण # 4 एक खराब उपयोगकर्ता अनुभव का कारण बनता है। जब तक आप सभी स्क्रिप्ट डाउनलोड नहीं कर लेते, आपकी वेबसाइट मूल रूप से लोड होना बंद हो जाती है। यदि कोई ऐसी चीज़ है जिससे उपयोगकर्ता घृणा करते हैं तो वह किसी वेबसाइट के लोड होने की प्रतीक्षा कर रहा है।
ऐसा क्यों होता है?
कोई भी स्क्रिप्ट अपने स्वयं के HTML को document.write()या अन्य DOM जोड़तोड़ के माध्यम से सम्मिलित कर सकती है । इसका अर्थ यह है कि स्क्रिप्ट डाउनलोड होने और निष्पादित होने से पहले तक पार्सर को इंतजार करना पड़ता है, इससे पहले कि वह बाकी दस्तावेज़ को सुरक्षित रूप से पार्स कर सके। आखिरकार, स्क्रिप्ट दस्तावेज़ में अपना स्वयं का HTML डाल सकती है।
हालाँकि, दस्तावेज़ लोड होते समय अधिकांश JavaScript डेवलपर अब DOM में हेरफेर नहीं करते हैं । इसके बजाय, वे तब तक प्रतीक्षा करते हैं जब तक कि दस्तावेज़ को संशोधित करने से पहले लोड नहीं किया गया हो। उदाहरण के लिए:
<!-- index.html -->
<html>
<head>
<title>My Page</title>
<script src="my-script.js"></script>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
</body>
</html>
जावास्क्रिप्ट:
// my-script.js
document.addEventListener("DOMContentLoaded", function() {
// this function runs when the DOM is ready, i.e. when the document has been parsed
document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});
क्योंकि आपके ब्राउज़र को my-script.js नहीं पता है कि दस्तावेज़ को संशोधित नहीं किया जा रहा है जब तक कि इसे डाउनलोड और निष्पादित नहीं किया गया है, तो पार्सर पार्स करना बंद कर देता है।
पुरातन सिफारिश
इस समस्या को हल करने के लिए पुराना तरीका यह था कि <script>टैग्स को अपने नीचे रखें <body>, क्योंकि यह सुनिश्चित करता है कि पार्सर बहुत अंत तक अवरुद्ध न हो।
इस दृष्टिकोण की अपनी समस्या है: ब्राउज़र स्क्रिप्ट को डाउनलोड करना शुरू नहीं कर सकता है जब तक कि पूरे दस्तावेज़ को पार्स नहीं किया जाता है। बड़ी स्क्रिप्ट और स्टाइलशीट वाली बड़ी वेबसाइटों के लिए, जल्द से जल्द स्क्रिप्ट डाउनलोड करने में सक्षम होना प्रदर्शन के लिए बहुत महत्वपूर्ण है। यदि आपकी वेबसाइट 2 सेकंड के भीतर लोड नहीं होती है, तो लोग दूसरी वेबसाइट पर जाएंगे।
एक इष्टतम समाधान में, ब्राउज़र जितनी जल्दी हो सके आपकी स्क्रिप्ट डाउनलोड करना शुरू कर देगा, जबकि एक ही समय में आपके बाकी दस्तावेज़ों को पार्स करना होगा।
आधुनिक दृष्टिकोण
आज, ब्राउज़र स्क्रिप्ट पर asyncऔर deferविशेषताओं का समर्थन करते हैं। ये विशेषताएँ उन ब्राउज़र को बताती हैं जिन्हें स्क्रिप्ट डाउनलोड किए जाने के दौरान पार्स करना जारी रखना सुरक्षित है।
async
<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>
Async विशेषता वाले स्क्रिप्ट्स को एसिंक्रोनस रूप से निष्पादित किया जाता है। इसका मतलब है कि स्क्रिप्ट को डाउनलोड किया जाता है जैसे ही यह डाउनलोड होता है, इस बीच ब्राउज़र को अवरुद्ध किए बिना।
इसका तात्पर्य यह है कि स्क्रिप्ट 2 के लिए संभव है कि स्क्रिप्ट 1 से पहले डाउनलोड और निष्पादित हो।
Http://caniuse.com/#feat=script-async के अनुसार , सभी ब्राउज़रों का 97.78% इसका समर्थन करते हैं।
आस्थगित करें
<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>
आस्थगित विशेषता वाले लिपियों को क्रम में निष्पादित किया जाता है (अर्थात पहले स्क्रिप्ट 1, फिर स्क्रिप्ट 2)। यह भी ब्राउज़र को ब्लॉक नहीं करता है।
Async स्क्रिप्ट के विपरीत, पूरे दस्तावेज़ लोड होने के बाद ही defer स्क्रिप्ट निष्पादित की जाती हैं।
Http://caniuse.com/#feat=script-defer के अनुसार , सभी ब्राउज़रों में से 97.79% इसका समर्थन करते हैं। 98.06% इसे कम से कम आंशिक रूप से समर्थन करते हैं।
ब्राउज़र संगतता पर एक महत्वपूर्ण नोट: कुछ परिस्थितियों में IE <= 9 आर्डर से हटाई गई स्क्रिप्ट को निष्पादित कर सकता है। यदि आपको उन ब्राउज़रों का समर्थन करने की आवश्यकता है, तो कृपया इसे पहले पढ़ें !
निष्कर्ष
वर्तमान अत्याधुनिक कला को स्क्रिप्ट को <head>टैग में रखना asyncया deferविशेषताओं का उपयोग करना है। यह आपके लिपियों को आपके ब्राउज़र को अवरुद्ध किए बिना डाउनलोड करने की अनुमति देता है।
अच्छी बात यह है कि आपकी वेबसाइट को अभी भी उन 2% ब्राउज़रों पर सही तरीके से लोड होना चाहिए जो अन्य 98% की गति प्राप्त करते समय इन विशेषताओं का समर्थन नहीं करते हैं।