2011-11-23 13 views
35

में जावास्क्रिप्ट डाल यदि यह सही </body> क्या एक अच्छा यह <head> में रखने के लिए कारण नहीं है इससे पहले कि जावास्क्रिप्ट डाल करने के लिए पूरी तरह से स्वीकार्य है?क्यों सिर

प्रश्न JavaScript in <head> or just before </body>? पर आधारित कई जवाब बताते हैं कि पृष्ठ </body> टैग से पहले सही रखेगा तो पृष्ठ तेज़ी से लोड हो जाएगा।

हालांकि मैं क्यों यह <head> में रखा जाना चाहिए पर किसी भी ध्वनि तर्क नहीं दिख रहा। मैं पूछ रहा हूं क्योंकि मैं एक बहुत ही मजबूत जावास्क्रिप्ट डेवलपर नहीं हूं और जो कुछ मैंने पढ़ा और देखा है, उससे मानक <head> में अधिकांश जावास्क्रिप्ट कोड और बाहरी संदर्भ रखना है।

उत्तर

29

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

6

इस के पीछे कारण के रूप में Head शरीर से पहले लोड हो जाता है। लोड पर शरीर में निष्पादित किया जाने वाला कोई गतिशील जावास्क्रिप्ट कोड सही तरीके से निष्पादित होगा।

यदि आपके पास जावास्क्रिप्ट है जो </body> टैग से ठीक पहले है तो आपके पृष्ठ द्वारा लोड किए जाने वाले कार्यों के लिए किए गए किसी भी जावास्क्रिप्ट कॉल को त्रुटि होगी।

तो हाँ </body> टैग से पहले जावास्क्रिप्ट डाल तेजी से लोड होगा। लेकिन केवल तभी जब आपका जावास्क्रिप्ट उदाहरण के लिए क्लिक के माध्यम से पेज लोड के बाद निष्पादित किया जाएगा। पहले शरीर भरी हुई है सिर में

+0

जेएस को '' टैग में डालने के लिए यह "सर्वोत्तम अभ्यास" है। वहां कुछ उपयोगी परिदृश्य हैं जहां यह उपयुक्त हो सकता है, लेकिन "सर्वोत्तम अभ्यास" बड़े पैमाने पर '' से पहले है। –

+1

@ क्रिस ने मेरे जवाब से उस भाग को संपादित किया। मेरा मतलब यह था कि '' में कब रखा जाना चाहिए और 'में कब रखा जाना चाहिए और अंत में जो कहना है, वह "सर्वोत्तम अभ्यास" के बजाय इसे सिर में डालने के लिए छूट नहीं देना था "जो मेरे हिस्से पर एक पर्ची थी। – Chris

2

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

अधिकांश समय, तल पर डालने वास्तव में, के अनुकूलन पेज डाउनलोड के लिए बेहतर है के रूप में उपयोगकर्ता से पहले जे एस भी डाउनलोड करना प्रारंभ पृष्ठ पर सभी सामग्री को देखने के मिल जाएगा।

-4

मुझे लगता है कि "विंडोज़" या "मैक" जैसे प्रश्न हैं, यदि आप अपने सभी जेएस स्रोत को वेबसाइट के हेड सेक्शन में डालते हैं तो आपको डब्ल्यू 3 सी के लिए मजबूत छोड़ दिया जाता है। अन्य मामला सिर में हमेशा कुछ भी शरीर तत्व के लिए लोड किया जाना चाहिए। और डीओएम सही ढंग से लोड किया गया है। jQuery की तरह जावास्क्रिप्ट फ्रेमवर्क में पूर्ण डोम को लोड करने के लिए $ (दस्तावेज़) .ready() जैसे फ़ंक्शंस लोड किए गए हैं। तो आप हेड टैग में अपने सभी जेएस कर सकते हैं। मेरे पसंद शरीर के अंत में सभी जे एस लोड करने के लिए है, लेकिन इस निर्णय का अपना :)

+2

यह ... बिल्कुल कोई समझ नहीं आता है। विशेष रूप से लाइनें "आप डब्ल्यू 3 सी के लिए मजबूत छोड़ दी गई हैं"। विनिर्देश यह नहीं बताते हैं कि आपको अपनी सभी स्क्रिप्ट को ' 'में रखने की आवश्यकता है, और यह प्रश्न राय के बारे में कोई सवाल नहीं है - ऐसा करने के लिए बहुत अच्छे तकनीकी कारण हैं, न केवल व्यक्तिगत स्वाद का मामला और पसंद –

1

केवल सिर में जे एस डाल करने के लिए कारण पर प्रत्येक डेवलपर को जाता है स्क्रिप्ट को संशोधित कैसे ब्राउज़र वास्तव में के लिए है पेज प्रस्तुत करता है। उदाहरण के लिए, Modernizr.js को सिर में लोड किया जाता है ताकि यह एचटीएमएल 5 तत्वों के लिए समर्थन जोड़ने और पृष्ठ को प्रस्तुत करने से पहले <html> टैग पर कक्षाओं में हेरफेर कर सके।

अन्यथा, आपके जेएस को पृष्ठ के निचले भाग में जाना चाहिए।

-1

परंपरागत रूप से पृष्ठों सत्यापन के लिए किया था नहीं (यह एक्सएचटीएमएल सख्त सत्यापन, या WAI-एएए अनुपालन, मैं याद नहीं कर सकते कि वास्तव में क्या विफल रहा है, लेकिन कुछ समय विफल हो लिपियों शरीर में थे)। यह आम तौर पर सभी स्क्रिप्ट को बाहरी फाइलों में डालने की सिफारिश के साथ-साथ एक स्क्रिप्ट src = "" टैग से लिंक करने की सिफारिश के साथ भी जाता है।

तर्क: शायद यह सबसे अर्थ मार्कअप के लिए शरीर के संरक्षण के तरीके के रूप W3C द्वारा सिफारिश की थी। मुझे लगता है कि, ऐतिहासिक रूप से, यह तर्क उन दिनों में महत्वपूर्ण था जब इंटरनेट आम तौर पर बहुत धीमा था - कुछ ब्राउज़रों को इंटरनेट कनेक्टिविटी डायग्नोस्टिक्स & सेटिंग्स के आधार पर स्क्रिप्ट और शैलियों और छवियों को अस्वीकार करने के लिए कॉन्फ़िगर किया गया था, और सिर में एक स्क्रिप्ट होने का एक तरीका है ब्राउज़र को बताते हुए "कनेक्टिविटी के मुद्दों को वारंट करने पर यह स्क्रिप्ट अस्वीकार करना ठीक है" जहां शरीर में स्क्रिप्ट को अर्थात् सामग्री के लिए अधिक अभिन्न माना जाता है। यद्यपि यह इतनी नीचता है, और शायद आउट-डेटेड डब्ल्यू 3 सी सिफारिशों के आधार पर, इसलिए मुझे ऐसे ब्राउज़र को खोजने के लिए कड़ी मेहनत की जाएगी जो वास्तव में इन दिनों इस तरह से चलती है।

आजकल यह केवल यह प्रभावित करने के लिए है कि पृष्ठ प्रतिपादन करते समय व्यवहार कैसे करता है।

सावधानी: इस स्क्रिप्ट को ऊपरी भाग की सामग्री को प्रभावित नहीं करते पर लागू नहीं करना चाहिए - उन्हें क्लोज़िंग शरीर टैग से पहले डाल कर उनके लदान स्थगित करने, ताकि उपयोगकर्ताओं को ऊपर देख सकते हैं बेहतर -एक-गुना सामग्री तेज (लोड करने के लिए रेंडर-अवरुद्ध स्क्रिप्ट के लिए प्रतीक्षा किए बिना)। यह Google और Yahoo

0

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

1

अतीत में, सिर में जे एस डाल करने के लिए एकमात्र कारण स्क्रिप्ट को संशोधित कैसे ब्राउज़र वास्तव में पेज renders के लिए किया गया था (के रूप में Chris Pratt ने बताया)। आज, जो अब मामला है, हालांकि:

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

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

संबंधित मुद्दे