👈🏼 🙅🏼 👨🏻‍💼 लोडिंग स्क्रिप्ट के अंधेरे पानी में विसर्जन 🏰 🔠 🚘

कुछ घंटों पहले, पृष्ठ पर स्क्रिप्ट लोड करने के संबंध में HTML5 Rocks पर वर्तमान स्थिति के बारे में एक अद्भुत लेख दिखाई दिया। मैं इसका अनुवाद आपके सामने प्रस्तुत करता हूं। निजी संदेश में संशोधन भेजे जा सकते हैं।

परिचय

इस लेख में, मैं आपको सिखाना चाहता हूं कि जावास्क्रिप्ट को एक ब्राउज़र में कैसे लोड किया जाए और इसे कैसे निष्पादित किया जाए।

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

शुरुआत के लिए, इस तरह से स्क्रिप्ट को लोड करने और निष्पादित करने के लिए विनिर्देश विभिन्न तरीकों को परिभाषित करता है:

WHATWG में लिपियों को लोड करने के बारे में क्या लिखा गया है

WHATWG में लिपियों को लोड करने के बारे में क्या लिखा गया है

सभी WHATWG विनिर्देशों की तरह, पहली नज़र में यह विनिर्देश स्क्रैबल कारखाने में क्लस्टर बम के प्रभाव जैसा दिखता है। लेकिन इसे 5 बार पढ़ने और आंखों से खून पोंछने के बाद, आपको यह काफी दिलचस्प लगने लगता है:

मेरा पहला स्क्रिप्ट कनेक्शन

<script src="//other-domain.com/1.js"></script> <script src="2.js"></script>

आह, आनंदित सरलता। इस मामले में, ब्राउज़र दोनों स्क्रिप्ट को समानांतर में डाउनलोड करेगा और उन्हें जल्द से जल्द निष्पादित करेगा, निर्दिष्ट आदेश को संरक्षित करेगा। 2. "js" तब तक निष्पादित नहीं होगा जब तक कि "1.js" को निष्पादित नहीं किया जाता (या यह ऐसा नहीं कर सकता), "1.js" तब तक निष्पादित नहीं किया जाएगा जब तक कि पिछली स्क्रिप्ट या शैली निष्पादित न हो जाए, आदि। आदि

दुर्भाग्य से, ब्राउज़र आगे पेज रेंडरिंग को ब्लॉक कर देता है जबकि यह सब होता है। जब से "वेब की पहली शताब्दी," यह DOM API के कारण है, जो स्ट्रिंग को उस सामग्री में जोड़ने की अनुमति देता है, जिसका उपयोग पार्सर उपयोग करता है, उदाहरण के लिए document.write का उपयोग करके। अधिक आधुनिक ब्राउज़र पृष्ठभूमि में दस्तावेज़ को स्कैन और पार्स करना जारी रखेंगे और आवश्यक तृतीय-पक्ष सामग्री (जेएस, चित्र, सीएसएस, आदि) को लोड करेंगे, लेकिन रेंडरिंग अभी भी अवरुद्ध होगी।

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

धन्यवाद IE! (नहीं, मैं व्यंग्य के बिना हूँ)

 <script src="//other-domain.com/1.js" defer></script> <script src="2.js" defer></script>

Microsoft ने इन प्रदर्शन समस्याओं की खोज की और इंटरनेट एक्सप्लोरर 4 में "आस्थगित" पेश किया। मूल रूप से, यह निम्नलिखित कहता है: "मैं वादा करता हूं कि document.write में कुछ भी उपयोग न document.write । अगर मैं इस वादे को तोड़ता हूं, तो आप मुझे किसी भी तरह से सजा दे सकते हैं। " यह विशेषता HTML4 में पेश की गई थी और यह अन्य ब्राउज़रों में भी दिखाई दी थी।

ऊपर दिए गए उदाहरण में, ब्राउज़र दोनों स्क्रिप्ट को एक साथ डाउनलोड करेगा और DOMContentLoaded कहे जाने से ठीक पहले उन्हें निष्पादित करेगा, आदेश संरक्षित किया जाएगा।

एक भेड़ कारखाने में एक क्लस्टर बम की तरह, डेफर एक भयंकर गंदगी बन गया। "Src" और "defer", साथ ही स्क्रिप्ट टैग और गतिशील रूप से भरी हुई स्क्रिप्ट के अलावा, हमारे पास स्क्रिप्ट जोड़ने के लिए 6 पैटर्न हैं। स्वाभाविक रूप से, ब्राउज़र उस आदेश पर सहमत नहीं हुए जिसमें उन्हें निष्पादित किया जाना चाहिए। मोज़िला अद्भुत ने 2009 में इस समस्या का वर्णन किया ।

WHATWG ने यह घोषित करते हुए व्यवहार को स्पष्ट कर दिया कि डिफ़र का उन लिपियों पर कोई प्रभाव नहीं पड़ेगा जिन्हें गतिशील रूप से जोड़ा गया था या जिनमें src नहीं था। अन्यथा, दस्तावेज़ को पार्स किए जाने के बाद "डिफर" वाली स्क्रिप्ट को निर्दिष्ट क्रम में चलाया जाना चाहिए।

धन्यवाद IE! (ठीक है, अब व्यंग्य के साथ)

एक दिया - दूसरा लिया गया। दुर्भाग्य से, IE4-9 में एक अप्रिय बग है जो गलत क्रम में स्क्रिप्ट निष्पादन को उत्तेजित कर सकता है। यहाँ क्या होता है:

1.js

 console.log('1'); document.getElementsByTagName('p')[0].innerHTML = 'Changing some content'; console.log('2');

2.js

 console.log('3');

मान लीजिए कि पृष्ठ पर एक पैराग्राफ है, लॉग्स का अपेक्षित क्रम [1, 2, 3] है, लेकिन IE9 और कम में परिणाम [1, 3, 2] होगा। कुछ DOM ऑपरेशंस IE को वर्तमान स्क्रिप्ट के निष्पादन को रोकने और जारी रखने से पहले कतार में अन्य स्क्रिप्ट को निष्पादित करने के लिए मजबूर करते हैं।

फिर भी, बग के बिना कार्यान्वयन में, जैसे कि IE10 और अन्य ब्राउज़र, स्क्रिप्ट के निष्पादन में देरी होगी जब तक कि पूरे दस्तावेज़ को लोड और पार्स नहीं किया जाता है। यह सुविधाजनक है यदि आप किसी भी मामले में DOMContentLoaded प्रतीक्षा कर रहे हैं, लेकिन यदि आप वास्तविक प्रदर्शन को बढ़ावा देना चाहते हैं, तो आप जल्द ही श्रोताओं और बूटस्ट्रैपिंग का उपयोग करना शुरू कर देंगे ...

बचाव के लिए HTML5

 <script src="//other-domain.com/1.js" async></script> <script src="2.js" async></script>

HTML5 ने हमें एक नई विशेषता दी, "async", जो मानता है कि आप दस्तावेज़ का उपयोग नहीं कर रहे हैं। या तो लिखें, लेकिन यह दस्तावेज़ के पार्स के समाप्त होने का इंतजार नहीं करता है। ब्राउज़र दोनों स्क्रिप्ट को एक साथ डाउनलोड करेगा और जितनी जल्दी हो सके उन्हें निष्पादित करेगा।

दुर्भाग्य से, चूंकि वे जितनी जल्दी हो सके निष्पादित करने का प्रयास करेंगे, "2.js" को "1.js" की तुलना में पहले निष्पादित किया जा सकता है। यह बहुत अच्छा है अगर वे एक दूसरे पर निर्भर नहीं हैं। उदाहरण के लिए, यदि "1.js" एक ट्रैकिंग स्क्रिप्ट है, जिसका "2.js" से कोई लेना-देना नहीं है। लेकिन अगर "1.js" jQuery की CDN प्रति है, जिस पर "2.js" निर्भर करता है, तो आपका पृष्ठ त्रुटियों से आच्छादित हो जाएगा, जैसे कि क्लस्टर बम के बाद ... मुझे नहीं पता ... मैं यहां कुछ भी नहीं लेकर आया हूं।

मुझे पता है कि हमें एक जावास्क्रिप्ट पुस्तकालय की आवश्यकता है!

पवित्र कंघी में लिपियों का एक समूह होता है जो पृष्ठ के प्रतिपादन को अवरुद्ध किए बिना तुरंत लोड करता है और जितनी जल्दी हो सके, उसी क्रम में चलता है, जिस क्रम में हमने उन्हें जोड़ा था। दुर्भाग्य से, HTML आपसे नफरत करता है और आपको ऐसा करने की अनुमति नहीं देगा।

विभिन्न शिष्टाचार में जावास्क्रिप्ट का उपयोग करके समस्या का समाधान किया गया था। कुछ तरीकों से आपको कॉलबैक में सब कुछ लपेटने के लिए जावास्क्रिप्ट में परिवर्तन करने की आवश्यकता होती है, जिसे पुस्तकालय सही क्रम में कहेंगे (उदाहरण के लिए, आवश्यकता )। दूसरों ने समानांतर लोडिंग के लिए XHR का उपयोग किया, और फिर सही क्रम में eval() , जो किसी अन्य डोमेन पर स्क्रिप्ट के लिए काम नहीं करता है, जब तक कि ब्राउज़र में एक CORS हैडर और इसके लिए समर्थन न हो । कुछ ने सुपर-मैजिक हैक का भी इस्तेमाल किया, जैसा कि नवीनतम लैबजेएस में किया गया था।

हैक ने हर तरह से संसाधन लोड करने में ब्राउज़र को धोखा दिया, डाउनलोड के अंत में एक घटना बढ़ा दी, लेकिन इसका निष्पादन शुरू नहीं किया। LabJS में, स्क्रिप्ट को पहले गलत माइम प्रकार के साथ जोड़ा गया था, उदाहरण के लिए

 .      ,   ,     mime-,    ,             .     ,   ,  ,  HTML5 ,         . 
 
          ,    ,  JavaScript-         ,    .  ,      ?     ,      ?   ?   ?    . 
 
 DOM   ! 
   ,     HTML5,          . 
 The async IDL attribute controls whether the element will execute asynchronously or not. If the element's "force-async" flag is set, then, on getting, the async IDL attribute must return true, and on setting, the "force-async" flag must first be unset… 
     " ": 
 [ '//other-domain.com/1.js', '2.js' ].forEach(function(src) { var script = document.createElement('script'); script.src = src; document.head.appendChild(script); });  .      ,   ,     mime-,    ,             .     ,   ,  ,  HTML5 ,         . 
 
          ,    ,  JavaScript-         ,    .  ,      ?     ,      ?   ?   ?    . 
 
 DOM   ! 
   ,     HTML5,          . 
 The async IDL attribute controls whether the element will execute asynchronously or not. If the element's "force-async" flag is set, then, on getting, the async IDL attribute must return true, and on setting, the "force-async" flag must first be unset… 
     " ": 
 [ '//other-domain.com/1.js', '2.js' ].forEach(function(src) { var script = document.createElement('script'); script.src = src; document.head.appendChild(script); }); 
 .      ,   ,     mime-,    ,             .     ,   ,  ,  HTML5 ,         . 
 
          ,    ,  JavaScript-         ,    .  ,      ?     ,      ?   ?   ?    . 
 
 DOM   ! 
   ,     HTML5,          . 
 The async IDL attribute controls whether the element will execute asynchronously or not. If the element's "force-async" flag is set, then, on getting, the async IDL attribute must return true, and on setting, the "force-async" flag must first be unset… 
     " ": 
 [ '//other-domain.com/1.js', '2.js' ].forEach(function(src) { var script = document.createElement('script'); script.src = src; document.head.appendChild(script); });  .      ,   ,     mime-,    ,             .     ,   ,  ,  HTML5 ,         . 
 
          ,    ,  JavaScript-         ,    .  ,      ?     ,      ?   ?   ?    . 
 
 DOM   ! 
   ,     HTML5,          . 
 The async IDL attribute controls whether the element will execute asynchronously or not. If the element's "force-async" flag is set, then, on getting, the async IDL attribute must return true, and on setting, the "force-async" flag must first be unset… 
     " ": 
 [ '//other-domain.com/1.js', '2.js' ].forEach(function(src) { var script = document.createElement('script'); script.src = src; document.head.appendChild(script); }); 
 .      ,   ,     mime-,    ,             .     ,   ,  ,  HTML5 ,         . 
 
          ,    ,  JavaScript-         ,    .  ,      ?     ,      ?   ?   ?    . 
 
 DOM   ! 
   ,     HTML5,          . 
 The async IDL attribute controls whether the element will execute asynchronously or not. If the element's "force-async" flag is set, then, on getting, the async IDL attribute must return true, and on setting, the "force-async" flag must first be unset… 
     " ": 
 [ '//other-domain.com/1.js', '2.js' ].forEach(function(src) { var script = document.createElement('script'); script.src = src; document.head.appendChild(script); });

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

 [ '//other-domain.com/1.js', '2.js' ].forEach(function(src) { var script = document.createElement('script'); script.src = src; script.async = false; document.head.appendChild(script); });

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

उपरोक्त स्क्रिप्ट को पृष्ठों के सिर में एम्बेड किया जाना चाहिए, क्रमिक रेंडरिंग को बाधित किए बिना, जितनी जल्दी हो सके डाउनलोड कतार शुरू करें, और आपके द्वारा निर्दिष्ट क्रम में जितनी जल्दी हो सके निष्पादित करना शुरू करें। "2.js" स्वतंत्र रूप से "1.js" पर डाउनलोड कर सकता है, लेकिन इसे तब तक निष्पादित नहीं किया जाएगा जब तक कि "1.js" को सफलतापूर्वक डाउनलोड और निष्पादित नहीं किया जाता है या इसमें से कोई भी नहीं कर सकता है। हुर्रे! अतुल्यकालिक लोडिंग, लेकिन ऑर्डर में निष्पादन!

इस पद्धति के साथ स्क्रिप्ट लोडिंग का समर्थन हर जगह किया जाता है जहां एसिंक विशेषता का समर्थन किया जाता है , सफारी 5.0 के अपवाद के साथ (5.1 पर सब कुछ ठीक है)। इसके अलावा, फ़ायरफ़ॉक्स और ओपेरा के सभी संस्करण जो एसिंक्स विशेषता का समर्थन नहीं करते हैं, अभी भी सही क्रम में गतिशील रूप से जोड़े गए स्क्रिप्ट निष्पादित करते हैं।

यह स्क्रिप्ट लोड करने का सबसे तेज़ तरीका है, है ना? तो?

ठीक है, अगर आप गतिशील रूप से तय करते हैं कि कौन सी स्क्रिप्ट को लोड करना है - हाँ, अन्यथा - यह संभव है कि नहीं। ऊपर दिए गए उदाहरण में, ब्राउज़र को स्क्रिप्ट को लोड करने और निर्धारित करने के लिए लोड करना चाहिए कि कौन सी स्क्रिप्ट को लोड करना है। यह आपकी स्क्रिप्ट को प्रीलोड स्कैनर से छुपाता है। ब्राउजर इन स्कैनर का उपयोग उन संसाधनों का पता लगाने के लिए करता है जिन्हें आप अगली यात्रा करने और पेज संसाधनों को खोजने की संभावना रखते हैं जबकि पार्सर को किसी अन्य संसाधन द्वारा अवरुद्ध किया जाता है।

हम इसे दस्तावेज़ के प्रमुख में डालकर वापस पता लगा सकते हैं:

 <link rel="subresource" href="//other-domain.com/1.js"> <link rel="subresource" href="2.js">

यह ब्राउज़र को बताता है कि पेज को 1.js और 2.js की आवश्यकता है और यह प्रीलोडर्स को दिखाई देता है। link[rel=subresource] link[rel=prefetch] समान है, लेकिन विभिन्न शब्दार्थों के साथ। दुर्भाग्य से, यह केवल क्रोम में समर्थित है, और आपको दो बार डाउनलोड करने के लिए स्क्रिप्ट घोषित करने की आवश्यकता है: लिंक तत्वों में पहला, आपकी स्क्रिप्ट में दूसरा।

यह लेख मुझे उदास करता है

स्थिति निराशाजनक है और आपको उदास महसूस करना चाहिए। स्क्रिप्ट को जल्दी और अतुल्यकालिक रूप से लोड करने के लिए पुनरावृत्ति के बिना अभी भी कोई घोषित तरीका नहीं है, जबकि एक ही समय में निष्पादन आदेश को नियंत्रित करता है।

HTTP2 / SPDY के आगमन के साथ, आप ओवरहेड को उस बिंदु तक कम कर सकते हैं जहां छोटी, स्व-कैश्ड फ़ाइलों में स्क्रिप्ट वितरित करना सबसे तेज़ तरीका होगा। जरा कल्पना करें:

 <script src="dependencies.js"></script> <script src="enhancement-1.js"></script> <script src="enhancement-2.js"></script> <script src="enhancement-3.js"></script> … <script src="enhancement-10.js"></script>

प्रत्येक एन्हांसमेंट स्क्रिप्ट एक विशिष्ट पृष्ठ घटक के साथ काम करती है, लेकिन निर्भरता में सहायक कार्यों की आवश्यकता होती है। आदर्श रूप से, हम सब कुछ अतुल्यकालिक रूप से लोड करना चाहते हैं, फिर एन्हांसमेंट स्क्रिप्ट को जितनी जल्दी हो सके, किसी भी क्रम में चलाएं, लेकिन निर्भरता के बाद। जे.एस. यह एक प्रगतिशील प्रगतिशील सुधार है!

दुर्भाग्य से, इसे प्राप्त करने के लिए कोई घोषित तरीका नहीं है, केवल अगर आप स्क्रिप्ट को संशोधित करते हैं तो निर्भरता की लोडिंग स्थिति की निगरानी के लिए। यहां तक कि async = false इस समस्या को हल नहीं करेगा, क्योंकि एन्हांसमेंट-10.js का कार्यान्वयन 1-9 से अवरुद्ध हो जाएगा। वास्तव में, केवल एक ब्राउज़र है जिसमें आप इसे बिना हैक के प्राप्त कर सकते हैं ...

IE एक विचार है!

IE अन्य ब्राउज़रों की तुलना में स्क्रिप्ट को अलग तरह से लोड करता है।

 var script = document.createElement('script'); script.src = 'whatever.js';

IE अब "जो भी। जेएस" डाउनलोड करना शुरू करता है, अन्य ब्राउज़रों को तब तक लोड करना शुरू नहीं होगा जब तक कि दस्तावेज़ में स्क्रिप्ट नहीं जोड़ा जाता है। IE में "रीडिस्टेटचेंज" ईवेंट और "रीडिस्टेट" संपत्ति भी होती है जो लोडिंग प्रक्रिया के बारे में सूचित करती है। यह वास्तव में बहुत उपयोगी है क्योंकि यह हमें स्वतंत्र रूप से एक दूसरे से लिपियों के लोडिंग और निष्पादन को नियंत्रित करने की अनुमति देता है।

 var script = document.createElement('script'); script.onreadystatechange = function() { if (script.readyState == 'loaded') { // Our script has download, but hasn't executed. // It won't execute until we do: document.body.appendChild(script); } }; script.src = 'whatever.js';

हम दस्तावेज़ में स्क्रिप्ट जोड़ने के लिए चुनकर जटिल निर्भरता मॉडल बना सकते हैं। IE 6 संस्करण से शुरू होने वाले इस मॉडल का समर्थन करता है। बहुत दिलचस्प है, लेकिन यह async=false रूप में ब्राउज़र का पता लगाने के साथ एक ही दोष है।

बस! मुझे स्क्रिप्ट कैसे डाउनलोड करनी चाहिए?

ठीक है, ठीक है। यदि आप स्क्रिप्ट को एक तरह से लोड करना चाहते हैं जो रेंडरिंग को ब्लॉक नहीं करता है, तो दोहराव की आवश्यकता नहीं है और इसके लिए उत्कृष्ट ब्राउज़र समर्थन है, तो मैं इसे सुझाता हूं:

 <script src="//other-domain.com/1.js"></script> <script src="2.js"></script>

यह एक है। शरीर तत्व के अंत में। हां, एक वेब डेवलपर होना राजा सेजीफस (बूम (ग्रीक पौराणिक कथाओं का उल्लेख करने के लिए 100 हिपस्टर अंक)) जैसा है। HTML और ब्राउज़र की सीमाएँ हमें बहुत बेहतर करने की अनुमति नहीं देती हैं।

मुझे आशा है कि जावास्क्रिप्ट मॉड्यूल स्क्रिप्ट को लोड करने के लिए एक घोषित गैर-अवरुद्ध तरीका प्रदान करके हमें बचाएगा और जिस क्रम में वे चलते हैं उस पर नियंत्रण है, भले ही इसके लिए मॉड्यूल के रूप में स्क्रिप्ट लिखने की आवश्यकता हो।

Yiwu, वहाँ कुछ बेहतर है कि हम अब उपयोग कर सकते हैं होना चाहिए?

खैर, बोनस अंक के लिए, यदि आप गंभीरता से प्रदर्शन के बारे में सोचते हैं और जटिलता और दोहराव से डरते नहीं हैं, तो आप कई विचार चाल को जोड़ सकते हैं।

सबसे पहले, हम प्रीलोडर्स के लिए एक सबरसोर्स घोषणा को जोड़ेंगे:

 <link rel="subresource" href="//other-domain.com/1.js"> <link rel="subresource" href="2.js">

फिर, दस्तावेज़ के सिर में, हम अपनी स्क्रिप्ट को async=false का उपयोग करके जावास्क्रिप्ट का उपयोग करते हुए लोड करते हैं, जो कि रीडिस्टेट के आधार पर IE के लिए एक स्क्रिप्ट को रास्ता देता है, जो बदले में सुरक्षित करने का रास्ता देता है।

 var scripts = [ '1.js', '2.js' ]; var src; var script; var pendingScripts = []; var firstScript = document.scripts[0]; // Watch scripts load in IE function stateChange() { // Execute as many scripts in order as we can var pendingScript; while (pendingScripts[0] && pendingScripts[0].readyState == 'loaded') { pendingScript = pendingScripts.shift(); // avoid future loading events from this script (eg, if src changes) pendingScript.onreadystatechange = null; // can't just appendChild, old IE bug if element isn't closed firstScript.parentNode.insertBefore(pendingScript, firstScript); } } // loop through our script urls while (src = scripts.shift()) { if ('async' in firstScript) { // modern browsers script = document.createElement('script'); script.async = false; script.src = src; document.head.appendChild(script); } else if (firstScript.readyState) { // IE<10 // create a script and add it to our todo pile script = document.createElement('script'); pendingScripts.push(script); // listen for state changes script.onreadystatechange = stateChange; // must set src AFTER adding onreadystatechange listener // else we'll miss the loaded event for cached scripts script.src = src; } else { // fall back to defer document.write('<script src="' + src + '" defer></'+'script>'); } }

कुछ तरकीबें, फिर न्यूनतमकरण, और यहाँ 362 बाइट्स + आपकी लिपियों के URL हैं:

 !function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer></'+t+">"),a.src=s}(document,"script",[ "//other-domain.com/1.js", "2.js" ])

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

काहे, अब मुझे पता है कि WHATWG स्क्रिप्ट लोडिंग सेक्शन इतना विशाल क्यों है। मुझे ड्रिंक चाहिए।

त्वरित संदर्भ

सरल लिपि तत्व

 <script src="//other-domain.com/1.js"></script> <script src="2.js"></script>

विनिर्देश कहता है: एक साथ डाउनलोड करें, किसी सीएसएस के बाद इसे क्रम में करें, जब तक आप समाप्त नहीं करते तब तक रेंडरिंग ब्लॉक करें
ब्राउज़र जवाब देता है: हाँ सर!

आस्थगित करें

 <script src="//other-domain.com/1.js" defer></script> <script src="2.js" defer></script>

विनिर्देशन कहता है: DOMContentLoaded से पहले एक साथ डाउनलोड करें, निष्पादित करें। "Src" के बिना स्क्रिप्ट के लिए "डिफर" पर ध्यान न दें।
IE <10 जवाब: यह संभव है कि मैं 1.js. के बीच में 2.js चलाऊंगा क्या वो मज़ा है ??
रेड ज़ोन के ब्राउज़र प्रतिक्रिया देते हैं: मुझे पता नहीं है कि क्या आस्थगित है, मैं स्क्रिप्ट को ऐसे लोड करूंगा जैसे कि यह नहीं था।
बाकी ब्राउज़र जवाब देते हैं: अच्छा है, लेकिन यह संभव है कि मैं "src" के बिना स्क्रिप्ट के लिए "डिफर" को अनदेखा नहीं करूंगा।

async

 <script src="//other-domain.com/1.js" async></script> <script src="2.js" async></script>

विनिर्देश कहता है: एक साथ डाउनलोड करें, किसी भी क्रम में निष्पादित करें जिसमें वे डाउनलोड किए गए हैं।
रेड ज़ोन ब्रॉउज़र उत्तर: "async" क्या है? मैं स्क्रिप्ट डाउनलोड करूंगा जैसे कि वह नहीं थी।
बाकी ब्राउज़र जवाब देते हैं: हाँ, अच्छा है।

असत्य असत्य

 [ '1.js', '2.js' ].forEach(function(src) { var script = document.createElement('script'); script.src = src; script.async = false; document.head.appendChild(script); });

विनिर्देश कहता है: एक साथ डाउनलोड करें, इसे क्रम में करें, जब सब कुछ बूट हो।
फ़ायरफ़ॉक्स <3.6, ओपेरा जवाब: मुझे नहीं पता कि "async" क्या है, लेकिन ऐसा हुआ कि मैं जेएस के माध्यम से जोड़े गए स्क्रिप्ट को उसी क्रम में निष्पादित करता हूं जिसमें उन्हें जोड़ा गया था।
सफ़ारी 5.0 जवाब: मैं "async" समझता हूँ, लेकिन मुझे नहीं पता कि इसे JS के माध्यम से कैसे सेट किया जाए। मैं किसी भी क्रम में आने पर आपकी स्क्रिप्ट निष्पादित करूंगा।
IE <10 उत्तर: मुझे "async" के बारे में कोई पता नहीं है, लेकिन "onreadystatechange" का उपयोग करके एक वर्कअराउंड है ।
अन्य रेड ज़ोन ब्राउज़र जवाब देते हैं: मुझे समझ में नहीं आता है "async", मैं किसी भी क्रम में आने पर आपकी स्क्रिप्ट निष्पादित करूंगा।
दूसरों का जवाब: मैं तुम्हारा दोस्त हूं, हम इसे एक पाठ्यपुस्तक की तरह करेंगे।

लोडिंग स्क्रिप्ट के अंधेरे पानी में विसर्जन