मैं html5 के साथ गड़बड़ कर रहा हूं, मैंने पहले कभी जावास्क्रिप्ट पर अच्छा नज़र डाला नहीं है। मैं इस तरह स्क्रिप्ट फ़ाइल (सिर में नहीं)क्या इससे कोई फर्क पड़ता है कि जावास्क्रिप्ट को HTML पृष्ठ पर रखा गया है?
<script src="somthing.js"></script>
स्क्रिप्ट केवल अगर यह पृष्ठ पर कुछ तत्वों के नीचे रखा काम करने लगता है फिर भी संदर्भित कर रहा हूँ।
क्या कोई विशेष परिस्थितियां हैं जब जावास्क्रिप्ट को रखा गया है?
अग्रिम धन्यवाद।
स्क्रिप्ट एक onload या "तैयार" किसी प्रकार की घटना के लिए इंतजार नहीं है, तो यह तत्वों (अन्यथा वे नहीं होगी लगता है) यह संदर्भ देता के बाद जगह की जरूरत है। यदि आप अनिश्चित हैं, तो </body> से पहले इसे चिपकाएं।
इस मामले में ऐसा लगता है कि यह ठीक हो रहा है, यह उन तत्वों की तलाश में है जो अभी तक डोम में नहीं जोड़े गए हैं। <body> के नीचे स्क्रिप्ट को रखने से इसका सामना करना एक आम प्रथा है। कुछ विकल्प उदाहरण के लिए आपके कोड को चलाने के लिए window.onload ईवेंट का उपयोग कर रहे हैं, या उदाहरण के लिए jQuery के $(document).ready() (अधिकांश प्रमुख पुस्तकालयों के कुछ समकक्ष हैं)।
यह इस बात पर निर्भर करता है कि स्क्रिप्ट को क्या करने के लिए डिज़ाइन किया गया है। यदि यह document.write() विधि का उपयोग कर रहा है, तो इससे कोई फर्क नहीं पड़ता कि यह पृष्ठ पर कहां है। यदि यह डोम में तत्वों का संदर्भ देने का प्रयास कर रहा है, तो यह सबसे अच्छा हैड में डाला गया है और उन कार्यों को जो पृष्ठ लोड होने के बाद टॉम किए गए डीओएम तत्वों तक पहुंचते हैं।
कुछ परिदृश्य हैं जहां प्लेसमेंट महत्वपूर्ण है।
your_script.js में foo() है और आप इसे कहते इससे पहले कि आप your_script.js में शामिल हैं, की तुलना में यह बस क्योंकि foo() अभी तक परिभाषित नहीं है काम नहीं करेगा।तो मूल रूप से ... यह आपके द्वारा चल रहे स्क्रिप्ट पर बहुत अधिक निर्भर करता है। कभी-कभी इससे कोई फर्क नहीं पड़ता, दूसरी बार यह नहीं होगा।
सबसे अच्छा Yahoo's Performance Rules के अनुसार अभ्यास पृष्ठ के तल पर स्क्रिप्ट जगह है:
स्क्रिप्ट की वजह से समस्या यह है कि वे समानांतर डाउनलोड को अवरुद्ध है। HTTP/1.1 विनिर्देश बताता है कि ब्राउज़र समानांतर प्रति होस्टनाम में दो से अधिक घटकों को डाउनलोड नहीं करते हैं। यदि आप कई होस्टनामों से अपनी छवियों की सेवा करते हैं, तो आप समानांतर में दो से अधिक डाउनलोड प्राप्त कर सकते हैं। जबकि एक स्क्रिप्ट डाउनलोड हो रही है, हालांकि, ब्राउजर अलग-अलग होस्टनामों पर भी कोई अन्य डाउनलोड शुरू नहीं करेगा।
कुछ स्थितियों में स्क्रिप्ट को नीचे ले जाना आसान नहीं है। यदि, उदाहरण के लिए, स्क्रिप्ट पृष्ठ की सामग्री के भाग को सम्मिलित करने के लिए document.write का उपयोग करती है, तो इसे पृष्ठ में कम स्थानांतरित नहीं किया जा सकता है। स्कोपिंग मुद्दे भी हो सकते हैं। कई मामलों में, इन परिस्थितियों को हल करने के तरीके हैं।
एक वैकल्पिक सुझाव जो अक्सर आता है वह स्थगित स्क्रिप्ट का उपयोग करना है।डेफर विशेषता इंगित करती है कि स्क्रिप्ट में document.write नहीं है, और यह ब्राउज़र के लिए एक सुराग है कि वे प्रतिपादन जारी रख सकते हैं। दुर्भाग्य से, फ़ायरफ़ॉक्स DEFER विशेषता का समर्थन नहीं करता है। इंटरनेट एक्सप्लोरर में, स्क्रिप्ट को स्थगित कर दिया जा सकता है, लेकिन जितना वांछित नहीं है। यदि एक स्क्रिप्ट को स्थगित किया जा सकता है, तो इसे पृष्ठ के नीचे भी ले जाया जा सकता है। इससे आपके वेब पेज तेजी से लोड हो जाएंगे।
अच्छी तरह से हमें यह जानना होगा कि आपकी स्क्रिप्ट में वास्तव में आपको क्या बताने के लिए क्या था, लेकिन संक्षिप्त जवाब "हाँ इससे कोई फर्क नहीं पड़ता"।
ब्राउज़र द्वारा सामना किए जाने पर स्क्रिप्ट (अनिवार्य रूप से) निष्पादित करें। एक क्लासिक ब्लंडर दस्तावेज़ में पहले वर्णित एक स्क्रिप्ट में पृष्ठ तत्व का संदर्भ देना है, जब यह संदर्भित करता है - जब स्क्रिप्ट निष्पादित होती है तो तत्व अभी तक मौजूद नहीं है!
इसे आम तौर पर सिर में स्क्रिप्ट रखने के लिए उचित माना जाता है, इसलिए उपरोक्त समस्या का समाधान onload ईवेंट हैंडलर को कार्यात्मक कोड संलग्न करने के लिए होता है।
बोनस राउंड: एक और अधिक सूक्ष्म कारण स्क्रिप्ट प्लेसमेंट मायने रखता है क्योंकि अधिकांश ब्राउज़र एक स्क्रिप्ट का सामना करते समय एकल-थ्रेड डाउनलोड करेंगे (सुरक्षा कारणों से और क्योंकि स्क्रिप्ट उदाहरण के लिए डाउनलोड आवश्यकताओं को संशोधित कर सकता है)। यह कारण है कि याहू आपके दस्तावेज़ में आखिरी स्क्रिप्ट रखने की सिफारिश करता है, लेकिन केवल धारणा के सूक्ष्म लाभ के लिए यह एक विवादास्पद बात है।
यदि आपकी स्क्रिप्ट किसी तत्व पर कार्य कर रही है तो इसे पृष्ठ पर उस तत्व के बाद रखा जाना चाहिए या पृष्ठ लोड होने पर निष्पादित करने के लिए सेट अप करने की आवश्यकता है। यदि तत्व डीओएम में तत्व जोड़ने से पहले चलता है (जो तब होता है जब ब्राउजर पेज को पार करता है), तब स्क्रिप्ट उस तत्व को नहीं ढूंढ सकती जिस पर आप इसे कार्य करना चाहते हैं। तत्व के बाद स्क्रिप्ट रखना सुनिश्चित करता है कि तत्व इसके लिए काम करने के लिए उपलब्ध है। इसी तरह, पूरे पेज लोड के बाद इसे चलाने के लिए मजबूर करना सुनिश्चित करता है कि सभी तत्व स्क्रिप्ट के लिए उपलब्ध हैं।
मैं सुझाव दूंगा कि, जहां तक संभव हो, आप </body> टैग बंद होने से ठीक पहले अपनी स्क्रिप्ट लोड करें। मैं jQuery जैसे ढांचे का उपयोग करने पर भी विचार करता हूं, जो पृष्ठ लोड पर अपनी स्क्रिप्ट को चलाने में आसान बनाता है और कोड के लोड ईवेंट के अंदर कोड को लपेटता है।
यह केवल पृष्ठ में स्क्रिप्ट को रखने के बारे में नहीं है, बल्कि जब स्क्रिप्ट में कोड निष्पादित किया जाता है।
स्क्रिप्ट टैग आमतौर पर पृष्ठ के head अनुभाग में जाते हैं। हालांकि, इसका मतलब है कि कोड लोड होने पर कोई तत्व लोड नहीं होता है, और यदि इसे तुरंत निष्पादित किया जाता है तो आप किसी भी तत्व तक नहीं पहुंच सकते हैं। इसका समाधान पृष्ठ के onload ईवेंट का उपयोग करना है। उदाहरण:
<html>
<head>
<title></title>
<script>
function init() {
document.getElementById('message').innerHTML = 'Hello world!';
}
</script>
</head>
<body onload="init();">
<div id="message"></id>
</body>
</html>
जावास्क्रिप्ट पुस्तकालयों कुछ समान, jQuery में ready घटना की तरह कर के अन्य तरीकों हो सकता है।
आप पृष्ठ में स्क्रिप्ट्स रख सकते हैं (हालांकि यह HTML मानक द्वारा अनुशंसित नहीं है), लेकिन यदि आपको तुरंत कोड चलाने वाले पृष्ठ से तत्वों तक पहुंचने की आवश्यकता है, तो स्क्रिप्ट को तत्वों के बाद लोड किया जाना चाहिए। उदाहरण:
<html>
<head>
<title></title>
</head>
<body>
<div id="message"></id>
<script>
document.getElementById('message').innerHTML = 'Hello world!';
</script>
</body>
</html>
प्रदर्शन कारणों से पृष्ठ में देर से लिपियों को भी रखा जा सकता है। आप इसे ध्यान में रख सकते हैं और इसे तब तक सहेज सकते हैं जब तक कि आपके पास वास्तव में कोई प्रदर्शन समस्या न हो।
याहू वास्तव में recommends नीचे अपनी स्क्रिप्ट डालने।जेएस फ़ाइल डाउनलोड करना एक अवरुद्ध क्रिया है जिसका मतलब है कि उस समय कुछ भी डाउनलोड नहीं हो रहा है (जैसे छवियां/सीएसएस) नीचे अपनी स्क्रिप्ट डालने से उपयोगकर्ता को HTML/images/css पहले मिल जाता है और वास्तव में पृष्ठ को तेज़ी से देखता है, और अंतःक्रियाशीलता जोड़ने के बाद आपके जेएस डाउनलोड।
कहा जाता है कि, जैसा कि अन्य पदों का उल्लेख है, आपकी स्क्रिप्ट को वास्तव में डोम को कुछ भी करने से पहले dom is ready तक प्रतीक्षा करनी है, अन्यथा आपके पास डीओएम तैयार होने पर निर्भर व्यवहार होगा।
पृष्ठ अवरुद्ध HTML5 में 'async' विशेषता के साथ शामिल स्क्रिप्ट को प्रभावित नहीं करता है: http://stackoverflow.com/a/11321472/1081234 –
ठीक है, मैं यही सोचता हूं।
यदि आपको क्लाइंट ब्राउज़र में प्रस्तुत करना शुरू करने से पहले, आपको अपनी स्क्रिप्ट निष्पादित करने की आवश्यकता है, तो <head> अनुभाग में रखा जाना बेहतर होगा।
और यदि आप किसी जावास्क्रिप्ट कोड को निष्पादित कर रहे हैं जो किसी तत्व के साथ किसी प्रकार से संचार करता है तो स्क्रिप्ट उस तत्व के पीछे रखी जानी चाहिए, क्योंकि अगर स्क्रिप्ट आगे बढ़ती है तो उसे संवाद करने के लिए इसके संबंधित तत्व नहीं मिल सकते हैं। इसलिए तत्व के पीछे रखना बेहतर है।
हाँ यह करता है।
उदाहरण के लिए, मान लीजिए कि आपका जेएस कोड शीर्ष पर है। और ब्राउजर को डोम पेड़ के एक सेक्शन की स्थापना करने से पहले इसका अर्थ दिया जाता है ... इस मामले में एचटीएमएल तत्व जिसे आप संदर्भित कर रहे हैं, यदि संदर्भित होने से पहले संदर्भित किया गया है, तो यह कहने में त्रुटि उत्पन्न होगी कि तत्व अपरिभाषित है।
एक और कारण उपयोगकर्ता अनुभव है। यदि सीएसएस शीर्ष पर है, जब एचटीएमएल प्रदर्शित होता है तो सब अच्छा लग रहा है, लेकिन जब तक जेएस नीचे नहीं है, तो आपको इसे लोड होने के लिए इंतजार करना होगा और बाकी को प्रस्तुत करने से पहले निष्पादन के लिए तैयार रहना होगा; इसलिए, उस दर को धीमा कर दें जिस पर स्क्रीन पर आइटम प्रस्तुत किए जाते हैं।
मुझे यह बहुत कुछ दिखाई देता है। विभिन्न ब्राउज़रों के लिए अलग-अलग स्ट्रोक, लेकिन बस जेएस को नीचे रखें, और शीर्ष पर सीएसएस रखें और आप इस तरह की चीजों के बारे में चिंता करने से बचें।
सरल शब्दों में: सुनिश्चित करें कि स्क्रिप्ट प्रारंभ होने से पहले स्क्रिप्ट एक्सेस तत्व लोड हो जाता है। अगर आप अनिश्चित हैं तो पहले इसे पहले रखें।
आपकी स्क्रिप्ट संभवतः तैयार होने से पहले डीओएम पर काम करने का प्रयास करती है। यह को चारों ओर ले जाकर हल किया जाना चाहिए, बल्कि domready कॉलबैक के साथ निष्पादन को परिभाषित करके हल किया जाना चाहिए।
इसके बाद क्रमबद्ध किया गया है, आपको head के अंदर script रखने की इच्छा रखनी चाहिए। पृष्ठ से बचने के लिए include scripts at the bottom of the page पर यह सामान्य अभ्यास होता था- और अनुरोध-अवरोधन। एचटीएमएल 5 में ऐसे प्रदर्शन प्रभाव अब कोई फर्क नहीं पड़ता क्योंकि आप async attribute का लाभ उठा सकते हैं। यह अनुमति देता है जे एस फ़ाइलों का लोड करने के लिए दुष्प्रभाव के बिना शुरू किया जा करने के लिए:
पारंपरिक स्क्रिप्ट HTML पार्सर ब्लॉक, गाया जा रहा है जब तक स्क्रिप्ट डाउनलोड किया गया है और रन से शेष पृष्ठ को रोकने। एचटीएमएल 5 एसिंक का उपयोग कर लिपियों के बाकी पेज को अनब्लॉक करें ताकि स्क्रिप्ट डाउनलोड होने पर लोडिंग जारी रह सके। ^
यह कुछ हद तक विवादास्पद है - लाभ केवल अवधारणात्मक हैं (यदि वह), सिर में एक ही लक्ष्य को पूरा करने के तरीके हैं, और डेफर सांस का कचरा है (जैसा कि वे नोट करते हैं)। – annakata
पेज अवरुद्ध एचटीएमएल 5 में 'async' विशेषता के साथ शामिल स्क्रिप्ट को प्रभावित नहीं करता है: http: // stackoverflow।com/a/11321472/1081234 –