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




jquery (14)

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

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

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

https://code.i-harness.com


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

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

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


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

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

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


आप स्क्रिप्ट चाहते हैं जहां आप एक और अभ्यास से बेहतर नहीं हो सकते हैं।

स्थिति निम्नानुसार है:

पेज लोड रैखिक रूप से, "टॉप-डाउन", इसलिए यदि आप स्क्रिप्ट को सिर में डालते हैं तो यह सुनिश्चित करता है कि यह सबकुछ से पहले लोड करना शुरू हो जाए, अब, यदि आप कोड के साथ मिश्रित शरीर के अंदर डालते हैं तो पृष्ठ को एक भयानक तरीके से लोड कर सकता है।

अच्छी प्रथा की पहचान करें जहां पर निर्भर नहीं है।

आपको समर्थन देने के लिए, मैं निम्नलिखित का उल्लेख करूंगा:

आप रख सकते हैं:

और पृष्ठ रैखिक रूप से लोड होगा

पेज को अन्य सामग्री के साथ असीमित रूप से लोड किया गया है

पृष्ठ की सामग्री लोड होने के पहले और बाद में लोड हो जाएगी स्क्रिप्ट लोड हो जाते हैं

यहां अच्छा अभ्यास होगा, प्रत्येक कब लागू होगा?

मुझे उम्मीद है कि मैं सहायक रहा हूं, कुछ भी मुझे इस मुद्दे का जवाब देता है।


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

<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

});

निर्भर करता है, यदि आप एक स्क्रिप्ट लोड कर रहे हैं जो आपके पृष्ठ को स्टाइल करने के लिए आवश्यक है / अपने पृष्ठ में कार्रवाइयों का उपयोग करना (जैसे बटन के क्लिक) तो आप बेहतर इसे शीर्ष पर रखें। यदि आपकी स्टाइल 100% सीएसएस है और आपके पास बटन क्रियाओं के लिए सभी फ़ॉलबैक विकल्प हैं तो आप इसे नीचे रख सकते हैं।

या सबसे अच्छी बात (यदि यह कोई चिंता नहीं है) तो आप एक मॉडल लोडिंग बॉक्स बना सकते हैं, अपने जावास्क्रिप्ट को अपने पेज के नीचे रखें और अपनी स्क्रिप्ट की आखिरी पंक्ति लोड होने पर इसे गायब कर दें। स्क्रिप्ट लोड होने से पहले आप अपने पृष्ठ में कार्रवाइयों का उपयोग कर उपयोगकर्ताओं से बच सकते हैं। और अनुचित स्टाइल से भी बचें।


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


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

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


याहू द्वारा प्रचारित मानक सलाह! असाधारण प्रदर्शन टीम, दस्तावेज़ निकाय के अंत में <script> टैग डालना है ताकि वे पृष्ठ के प्रतिपादन को अवरुद्ध न करें।

लेकिन कुछ नए दृष्टिकोण हैं जो Google Analytics जावास्क्रिप्ट फ़ाइल के लोड समय के बारे में इस उत्तर में वर्णित बेहतर प्रदर्शन प्रदान करते हैं:

स्टीव साउडर (क्लाइंट-साइड प्रदर्शन विशेषज्ञ) द्वारा कुछ महान स्लाइडें हैं:

  • समानांतर में बाहरी जावास्क्रिप्ट फ़ाइलों को लोड करने के लिए विभिन्न तकनीकें
  • समय और पेज प्रतिपादन लोड करने पर उनके प्रभाव
  • ब्राउजर प्रदर्शित करता है (उदाहरण के लिए स्टेटस बार, घंटा ग्लास माउस कर्सर में 'लोडिंग') किस प्रकार का "प्रगति" संकेतक है।

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

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

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

Blockquote


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

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

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

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


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

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


<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 भी करें!







html