javascript - मुझे HTML मार्कअप में<script>टैग कहां रखना चाहिए?




jquery (17)

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

मैंने सुना है कि सफारी के पुराने संस्करण मुख्य टैग के बाहर अपनी स्क्रिप्ट जोड़ते समय क्वार्कली थे लेकिन मैं कहता हूं कि कौन परवाह करता है। मैं उस पुराने बकवास का उपयोग कर किसी को भी नहीं जानता।

रास्ते से अच्छा सवाल है।

किसी HTML दस्तावेज़ में जावास्क्रिप्ट को एम्बेड करते समय, <script> टैग और जावास्क्रिप्ट को शामिल करने के लिए उचित स्थान कहां है? मुझे याद है कि आपको इन्हें <head> सेक्शन में नहीं रखना है, लेकिन <body> सेक्शन की शुरुआत में रखना भी बुरा है, क्योंकि पेज को पूरी तरह से प्रस्तुत करने से पहले जावास्क्रिप्ट को पार्स किया जाना होगा ( या कुछ इस तरह का)। ऐसा लगता है कि <body> अनुभाग <body> end <script> टैग के लिए लॉजिकल स्थान के रूप में समाप्त होता है।

तो, <script> टैग डालने का सही स्थान कहां है ?

(यह प्रश्न इस प्रश्न का संदर्भ देता है, जिसमें यह सुझाव दिया गया था कि जावास्क्रिप्ट फ़ंक्शन कॉल को <a> टैग से <script> टैग में स्थानांतरित किया जाना चाहिए। मैं विशेष रूप से jQuery का उपयोग कर रहा हूं, लेकिन अधिक सामान्य उत्तर भी उपयुक्त हैं।)


<script src="myjs.js"></script>
</body>

स्क्रिप्ट टैग हमेशा एचटीएमएल फाइल में शरीर बंद या नीचे से पहले उपयोग किया जाना चाहिए।

तो आप जेएस फ़ाइल लोड करने से पहले पेज की सामग्री पहले देख सकते हैं।

यदि आवश्यक हो तो इसे जांचें: http://stevesouders.com/hpws/rule-js-bottom.php


  • यदि आप अभी भी आईई <10 में समर्थन और प्रदर्शन के बारे में बहुत अधिक परवाह करते हैं, तो हमेशा अपने स्क्रिप्ट टैग को अपने एचटीएमएल बॉडी के आखिरी टैग बनाने के लिए सबसे अच्छा है। इस तरह, आप निश्चित हैं कि बाकी डोम लोड हो गया है और आप ब्लॉक और प्रतिपादन नहीं करेंगे।

  • यदि आपको आईई <10 के बारे में और अधिक परवाह नहीं है, तो हो सकता है कि आप अपनी स्क्रिप्ट को अपने दस्तावेज़ के सिर में रखना चाहें और यह सुनिश्चित defer लिए defer का उपयोग करें कि वे केवल आपके डोम लोड होने के बाद ही चलें ( <script type="text/javascript" src="path/to/script1.js" defer></script> )। यदि आप अभी भी आईई <10 में अपना कोड काम करना चाहते हैं, तो अपने कोड को window.onload में लपेटना न भूलें। हालांकि, यहां तक ​​कि window.onload भी करें!


जैसा कि बताया गया है, बंद शरीर टैग से ठीक पहले

http://developer.yahoo.com/performance/rules.html#js_bottom

नीचे लिपियों को रखो

स्क्रिप्ट के कारण समस्या यह है कि वे समानांतर डाउनलोड को अवरुद्ध करते हैं। HTTP / 1.1 विनिर्देश बताता है कि ब्राउज़र समानांतर प्रति होस्टनाम में दो से अधिक घटकों को डाउनलोड नहीं करते हैं। यदि आप कई होस्टनामों से अपनी छवियों की सेवा करते हैं, तो आप समानांतर में दो से अधिक डाउनलोड प्राप्त कर सकते हैं। जबकि एक स्क्रिप्ट डाउनलोड हो रही है, हालांकि, ब्राउजर अलग-अलग होस्टनामों पर भी कोई अन्य डाउनलोड शुरू नहीं करेगा।


स्क्रिप्ट और इसके उपयोग के आधार पर सबसे अच्छा संभव (पेज लोड और प्रतिपादन समय के संदर्भ में) पारंपरिक <script> -tag प्रति से उपयोग नहीं किया जा सकता है, लेकिन गतिशील रूप से स्क्रिप्ट को असीमित रूप से लोड करने के लिए ट्रिगर करने के लिए।

कुछ अलग तकनीकें हैं, लेकिन सबसे सीधे आगे document.createElement ("script") का उपयोग करना है जब window.onload ईवेंट ट्रिगर होता है। तब स्क्रिप्ट को पहले लोड किया जाता है जब पेज स्वयं ही प्रस्तुत किया जाता है, इस प्रकार उपयोगकर्ता को पेज के आने के लिए इंतजार करने के समय को प्रभावित नहीं किया जाता है।

यह स्वाभाविक रूप से आवश्यक है कि पृष्ठ के प्रतिपादन के लिए स्क्रिप्ट की आवश्यकता नहीं है।

अधिक जानकारी के लिए, Steve Souders (YSlow के निर्माता लेकिन अब Google पर) द्वारा Coupling async स्क्रिप्ट पोस्ट देखें।


लिपियों को, या किसी HTML पृष्ठ के अनुभाग में या दोनों में रखा जा सकता है।

<head>
<script></script>
</head>
or here
<body>
<script></script>
</body>

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

Blockquote


अंत में स्क्रिप्ट सहित मुख्य रूप से उपयोग किया जाता है जहां वेबसाइट की सामग्री / शैलियों को पहले दिखाया जाना है।

सिर में लिपियों सहित स्क्रिप्ट को जल्दी लोड करता है और पूरी वेबसाइट के लोड होने से पहले इसका उपयोग किया जा सकता है।

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


यहां बताया गया है कि जब कोई ब्राउज़र किसी वेबसाइट को <script> टैग के साथ लोड करता है तो क्या होता है:

  1. एचटीएमएल पेज प्राप्त करें (जैसे index.html)
  2. एचटीएमएल पार्सिंग शुरू करें
  3. पार्सर एक <script> टैग को बाहरी स्क्रिप्ट फ़ाइल का संदर्भ देता है।
  4. ब्राउज़र स्क्रिप्ट फ़ाइल का अनुरोध करता है। इस बीच, पार्सर ब्लॉक और आपके पृष्ठ पर अन्य HTML को पार्स करना बंद कर देता है।
  5. कुछ समय बाद स्क्रिप्ट डाउनलोड हो जाती है और बाद में निष्पादित की जाती है।
  6. पार्सर बाकी HTML दस्तावेज़ को पार्स करना जारी रखता है।

चरण 4 खराब उपयोगकर्ता अनुभव का कारण बनता है। आपकी वेबसाइट मूल रूप से तब तक लोड हो जाती है जब तक आप सभी स्क्रिप्ट डाउनलोड नहीं कर लेते। यदि ऐसी कोई बात है जो उपयोगकर्ता इसे वेबसाइट से लोड होने की प्रतीक्षा करने से नफरत करते हैं।

यह भी क्यों होता है?

कोई भी स्क्रिप्ट document.write() या अन्य DOM मैनिपुलेशन के माध्यम से अपना स्वयं का HTML डाल सकती है। इसका तात्पर्य यह है कि पार्सर को तब तक इंतजार करना पड़ता है जब तक कि स्क्रिप्ट को डाउनलोड और निष्पादित नहीं किया जाता है, इससे पहले कि वह बाकी दस्तावेज़ को सुरक्षित रूप से पार्स कर सके। आखिरकार, स्क्रिप्ट दस्तावेज़ में अपना स्वयं का HTML डाल सकता था।

हालांकि, दस्तावेज़ लोड होने के दौरान अधिकांश जावास्क्रिप्ट डेवलपर्स अब डोम में हेरफेर नहीं करते हैं । इसके बजाए, जब तक दस्तावेज़ को संशोधित करने से पहले लोड नहीं किया जाता है तब तक वे प्रतीक्षा करते हैं। उदाहरण के लिए:

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script type="text/javascript" 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";
});

चूंकि आपका ब्राउज़र नहीं जानता है कि मेरी-script.js दस्तावेज को तब तक संशोधित नहीं करेगा जब तक कि इसे डाउनलोड और निष्पादित नहीं किया जाता है, पार्सर पार्सिंग बंद कर देता है।

पुरातन सिफारिश

इस समस्या को हल करने का पुराना तरीका <script> टैग को आपके <body> के नीचे रखना था, क्योंकि यह सुनिश्चित करता है कि पार्सर बहुत अंत तक अवरुद्ध नहीं है।

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

एक इष्टतम समाधान में, ब्राउज़र जितनी जल्दी हो सके आपकी स्क्रिप्ट डाउनलोड करना शुरू कर देगा, जबकि साथ ही आपके बाकी दस्तावेज़ को पार्स कर देगा।

आधुनिक दृष्टिकोण

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

async

<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>

Async विशेषता वाले स्क्रिप्ट को असीमित रूप से निष्पादित किया जाता है। इसका अर्थ यह है कि इस दौरान स्क्रिप्ट को डाउनलोड किए जाने पर ही इसे डाउनलोड किया जाता है।
इसका तात्पर्य है कि स्क्रिप्ट 2 से पहले स्क्रिप्ट 2 डाउनलोड और निष्पादित करना संभव है।

http://caniuse.com/#feat=script-async अनुसार, सभी ब्राउज़र का 9 0% इसका समर्थन करते हैं।

टालना

<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>

डिफर विशेषता वाले स्क्रिप्ट को क्रम में निष्पादित किया जाता है (यानी पहली स्क्रिप्ट 1, फिर स्क्रिप्ट 2)। यह ब्राउज़र को अवरुद्ध नहीं करता है।

Async स्क्रिप्ट के विपरीत, संपूर्ण दस्तावेज़ लोड होने के बाद डिफॉल्ट स्क्रिप्ट केवल निष्पादित की जाती हैं।

http://caniuse.com/#feat=script-defer अनुसार, सभी ब्राउज़र का 9 0% इसका समर्थन करते हैं। 92% कम से कम आंशिक रूप से इसका समर्थन करते हैं।

ब्राउज़र संगतता पर एक महत्वपूर्ण नोट: कुछ परिस्थितियों में IE <= 9 आदेश से बाहर स्थगित स्क्रिप्ट निष्पादित कर सकता है। यदि आपको उन ब्राउज़रों का समर्थन करने की आवश्यकता है, तो कृपया this पहले पढ़ें!

निष्कर्ष

वर्तमान अत्याधुनिक है <head> टैग में स्क्रिप्ट डालना और async या defer विशेषताएँ का उपयोग करना। यह आपकी स्क्रिप्ट को आपके ब्राउज़र को अवरुद्ध किए बिना एप डाउनलोड करने की अनुमति देता है।

अच्छी बात यह है कि आपकी वेबसाइट को उन 20% ब्राउज़र पर सही ढंग से लोड करना चाहिए जो अन्य 80% की गति करते समय इन विशेषताओं का समर्थन नहीं करते हैं।


स्क्रिप्ट ब्लॉक डीओएम लोड जब तक यह लोड और निष्पादित नहीं है।

यदि आप <body> के अंत में स्क्रिप्ट रखते हैं तो सभी डोम को लोड करने और प्रस्तुत करने का मौका होता है (पृष्ठ "तेज़" प्रदर्शित होगा)। <script> उन सभी डोम तत्वों तक पहुंच होगी।

दूसरी तरफ <body> प्रारंभ या ऊपर के बाद इसे स्क्रिप्ट निष्पादित करेगा (जहां अभी भी कोई डोम तत्व नहीं है)।

आप jQuery सहित हैं जिसका अर्थ है कि आप इसे जहां भी चाहें और उपयोग कर सकते हैं .ready()


गैर-अवरुद्ध स्क्रिप्ट टैग को लगभग कहीं भी रखा जा सकता है:

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>
  • जैसे ही यह उपलब्ध हो, async स्क्रिप्ट को असीमित रूप से निष्पादित किया जाएगा
  • जब दस्तावेज़ ने पार्सिंग समाप्त कर दी है तो defer स्क्रिप्ट निष्पादित की जाती है
  • async defer स्क्रिप्ट अगर defyn समर्थित नहीं है तो defer व्यवहार पर वापस आ जाता है

इस तरह की स्क्रिप्ट को असीमित रूप से / दस्तावेज़ तैयार करने के बाद निष्पादित किया जाएगा, जिसका अर्थ है कि आप यह नहीं कर सकते हैं:

<script src="jquery.js" async></script>
<script>jQuery(something);</script>
<!--
  * might throw "jQuery is not defined" error
  * defer will not work either
-->

या यह:

<script src="document.write(something).js" async></script>
<!--
  * might issue "cannot write into document from an asynchronous script" warning
  * defer will not work either
-->

या यह:

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
<!--
  * might throw "jQuery is not defined" error (no guarantee which script runs first)
  * defer will work in sane browsers
-->

या यह:

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
<!--
  * might not locate #header (script could fire before parser looks at the next line)
  * defer will work in sane browsers
-->

ऐसा कहकर, एसिंक्रोनस स्क्रिप्ट इन फायदों की पेशकश करते हैं:

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

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


पारंपरिक (और व्यापक रूप से स्वीकार्य) उत्तर "नीचे" है, क्योंकि तब पूरा डीओएम निष्पादित करना शुरू करने से पहले लोड हो जाएगा।

विभिन्न कारणों से असंतोषजनक हैं, उपलब्ध अभ्यास के साथ जानबूझकर एक पृष्ठ अधिभार ईवेंट के साथ निष्पादन शुरू करना।


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

$(document).ready (function{

//your code here

});

एचटीएमएल दस्तावेज़ के अंत में

ताकि यह निष्पादन के समय ब्राउज़र में HTML दस्तावेज़ की लोडिंग को प्रभावित नहीं करेगा।


आप <body> के अंत में अधिकांश <script> संदर्भों को रख सकते हैं,
लेकिन अगर आपके पृष्ठ पर सक्रिय घटक हैं जो बाह्य स्क्रिप्ट का उपयोग कर रहे हैं,
तो उनकी निर्भरता (जेएस फाइलें) इससे पहले आनी चाहिए (आदर्श रूप से हेड टैग में)।


यदि आप JQuery का उपयोग कर रहे हैं तो जावास्क्रिप्ट को जहां भी आपको सबसे अच्छा लगे और $(document).ready() का उपयोग करें ताकि यह सुनिश्चित किया जा सके कि किसी भी फ़ंक्शन को निष्पादित करने से पहले चीजें ठीक से लोड हो जाएं।

एक तरफ ध्यान दें: मुझे अपने सभी स्क्रिप्ट टैग <head> सेक्शन में पसंद है जैसा कि यह सबसे साफ स्थान लगता है।


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


मैं देखता हूं कि आपने अपने प्रश्न का उत्तर दिया है, लेकिन यहां एक और विकल्प है:

असल में, आप यह धारणा बना रहे हैं

//= require_tree .

आवश्यक है। यह। इसे हटाने के लिए स्वतंत्र महसूस करें। मेरे वर्तमान एप्लिकेशन में, पहले मैं 3.1.x के साथ ईमानदारी से कर रहा हूं, मैंने तीन अलग-अलग शीर्ष स्तर जेएस फाइलें बनाई हैं। मेरी application.js फ़ाइल में केवल है

//= require jquery
//= require jquery_ujs
//= require_directory .
//= require_directory ./api
//= require_directory ./admin

इस तरह, मैं अपने स्वयं के शीर्ष स्तर की जेएस फाइलों के साथ उपनिर्देशिकाएं बना सकता हूं, जिसमें केवल मुझे जो चाहिए वह शामिल है।

चाबियाँ हैं:

  1. आप require_tree को हटा सकते हैं - रेल आपको अपनी धारणाओं को बदलने देता है
  2. Name.js नाम के बारे में कुछ खास नहीं है - assets/javascript उपनिर्देशिका में किसी भी फ़ाइल में //= साथ प्री-प्रोसेसर निर्देश शामिल हो सकते हैं

उम्मीद है कि ClosureCowboy के जवाब में कुछ विवरणों को मदद और जोड़ता है।

Sujal





javascript jquery html