2010-03-16 10 views
72

अधिकांश जावास्क्रिप्ट और वेब विकास पुस्तकें/लेख कहता है कि आपको पृष्ठ के निचले हिस्से में सीएसएस को हेड टैग और जावास्क्रिप्ट में रखना होगा।पेशेवरों और विपक्ष क्या हैं: सिर में जावास्क्रिप्ट डालना और शरीर को बंद करने से पहले

लेकिन जब मैं इस स्टैक ओवरफ्लो जैसी प्रसिद्ध वेबसाइटों के एचटीएमएल स्रोत खोलता हूं, तो मुझे लगता है कि वे कुछ टैग्स को हेड टैग में डालते हैं।

दोनों दृष्टिकोणों के पेशेवरों और विपक्ष क्या हैं और किसका उपयोग करना है?

ही जारी करने के लिए एक और सवाल मिला: Where should I declare JavaScript files used in my page? In <head></head> or near </body>?

+0

http://stackoverflow.com/questions/383045/is-put-scripts-at-the-bottom- सही – froadie

+0

यह भी देखें: http://stackoverflow.com/questions/1013112/where-should-i- घोषणा-जावास्क्रिप्ट-फाइल-प्रयुक्त-इन-माय-पेज-इन-हेड-हेड-या-पास और http://stackoverflow.com/questions/383045/is-put-scripts-at-the-bottom- सही – CMS

उत्तर

51

याहू Best Practices for Speeding Up Your Web Site से:

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

कुछ स्थितियों में स्क्रिप्ट को नीचे ले जाना आसान नहीं है। यदि, उदाहरण के लिए, स्क्रिप्ट दस्तावेज़.write का उपयोग पृष्ठ की सामग्री के भाग को सम्मिलित करने के लिए करती है, तो इसे पृष्ठ में स्थानांतरित नहीं किया जा सकता है। स्कॉइंग समस्याएं भी हो सकती हैं। कई मामलों में, इन परिस्थितियों को हल करने के तरीके हैं।

एक वैकल्पिक सुझाव है कि अक्सर स्थगित स्क्रिप्ट का उपयोग करना आता है। डेफर विशेषता इंगित करती है कि स्क्रिप्ट में document.write नहीं है, और यह ब्राउज़र का एक संकेत है कि वे प्रतिपादन जारी रख सकते हैं। दुर्भाग्य से, फ़ायरफ़ॉक्स DEFER विशेषता का समर्थन नहीं करता है। इंटरनेट एक्सप्लोरर में, स्क्रिप्ट स्थगित हो सकती है, लेकिन वांछित नहीं है। यदि एक स्क्रिप्ट को स्थगित किया जा सकता है, इसे पृष्ठपृष्ठ के नीचे भी ले जाया जा सकता है। इससे आपका वेब पृष्ठ तेज़ी से लोड हो जाएगा।

इसलिए, सामान्य रूप से, उन्हें नीचे रखने के लिए प्राथमिकता है। हालांकि, यह हमेशा संभव नहीं होता है, और यह अक्सर नहीं बनाता है कि वैसे भी एक अंतर है।

+0

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

+0

@DougHauf यकीन नहीं है कि मैं इस पर सटीक हूं लेकिन क्या आपने एक DOMContentLoaded श्रोता जोड़ा है? मैं पूछता हूं क्योंकि यदि आपकी निचली हिस्से में आपकी स्क्रिप्ट है और यह कैनवास को ठीक से प्रस्तुत करती है; ऐसा इसलिए है क्योंकि इससे पहले कि आप इसे लिखने का प्रयास करने से पहले कैनवास स्क्रीन पर लोड हो चुके थे। अब यदि आप स्क्रिप्ट को हेडर में डालते हैं तो यह कैनवास पर नहीं आ जाएगा क्योंकि कैनवास अभी तक नहीं है।तो यदि आप श्रोता को जोड़ते हैं तो कैनवास लोड होने के बाद यह आपके कैनवास कोड को आग लगा देगा। –

4

सिर में किसी भी जावास्क्रिप्ट पेज लोड होने से पहले मूल्यांकन किया जाएगा, जिसका अर्थ है पेज का मानना ​​है अधिक समय लगता है की तरह लोड करने के लिए। यदि सभी जावास्क्रिप्ट अंत में हैं, तो ईवेंट ठीक से काम करने के लिए थोड़ा कठिन है, लेकिन jQuery आपके लिए इस समस्या को हल करता है।

+2

क्या आप उल्लेख कर सकते हैं कि jQuery इस समस्या को ब्याज से कैसे हल करता है? –

+0

jQuery में ईवेंट – Draemon

5

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

27

के रूप में अन्य लोगों ने कहा है, जब आप सिर में जावास्क्रिप्ट डाल जब तक के बाद स्क्रिप्ट लोड किया है, पृष्ठ लोड करने के समय लग सकता है जिसका मतलब है कि पृष्ठ की प्रस्तुति विलंब - खासकर यदि आप बड़े स्क्रिप्ट फ़ाइलें डाउनलोड कर रहे हैं।

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

यदि आप शैली या तत्व जोड़ रहे हैं (आदि कुछ प्रकार के समृद्ध संपादक के साथ टेक्स्टफील्ड स्विच कर रहे हैं) तो यह उपयोगकर्ता को झटके के रूप में दिखाई देगा।

यदि आप तत्वों पर क्लिक-ईवेंट जोड़ रहे हैं, तो वे तत्वों के दिखाई देने के कुछ समय बाद क्लिक करने योग्य नहीं होंगे।

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

आईएमएचओ (पूरी तरह से वाईएसएलओ और चालाक लोगों के खिलाफ) आपको अपनी स्क्रिप्ट को हेड टैग में रखना चाहिए, और बस उन पर भरोसा करने के लिए भरोसा करें।

8

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

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

हां आपको अपने आवेदन को आर्किटेक्ट करने के बारे में थोड़ा कठिन विचार करना पड़ सकता है, लेकिन मुझे लगता है कि यह मेरे लिए बहुत ही स्वाभाविक हो गया है। मैंने पिछले 4 वर्षों में स्क्रिप्ट के साथ सैकड़ों वेब ऐप्स बनाए हैं और मैं अंतर बता सकता हूं। मैं 500ms हो सकता है यह 5000ms हो सकता है लेकिन यह सब मायने रखता है।

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