क्या है पेशेवरों और विपक्ष: सिर में जावास्क्रिप्ट डालना और शरीर को बंद करने से ठीक पहले डालना

Question

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

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

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

इसी मुद्दे के लिए एक और सवाल मिला: मुझे अपने पृष्ठ में उपयोग की जाने वाली जावास्क्रिप्ट फ़ाइलों की घोषणा कहाँ करनी चाहिए? <Head> </ head> में या </ body> के पास?

Comments

stackoverflow.com/questions/383045/…

— फ्रॉडी

इन्हें भी देखें: stackoverflow.com/questions/1013112/… और stackoverflow.com/questions/383045/…

— क्रिश्चियन सी। साल्वाडोर

Answer 1

अपनी वेब साइट को गति देने के लिए याहू के सर्वोत्तम अभ्यासों से :

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

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

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

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

Comments

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

— डग अड्डा

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

— मैथ्यू डी औल्ड

मुझे नहीं पता कि आप जिस दस्तावेज़ को उद्धृत कर रहे हैं वह कितना पुराना है, लेकिन ऐसा लगता है कि फ़ायरफ़ॉक्स में काफी समय से डिफर विशेषता का समर्थन किया गया है ।

— user2428118

धन्यवाद, यह मेरी बहुत मदद करता है

— tonydeleon

Answer 2

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

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

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

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

कभी-कभी शोध के मुद्दों के लिए आपको अपनी स्क्रिप्ट को सिर में लगाने की आवश्यकता होती है, अन्य बार आप उन्हें नीचे की तरफ चिपकाकर ठीक हो जाएंगे।

IMHO (पूरी तरह से YSlow और बहुत चालाक लोगों के खिलाफ) आपको अपनी लिपियों को हेड टैग में रखना चाहिए, और बस उन पर भरोसा करना होगा कि ज्यादातर समय कैश्ड हो।

Answer 3

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

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

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

Answer 4

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

Answer 5

पृष्ठ लोड होने से पहले सिर में किसी भी जावास्क्रिप्ट का मूल्यांकन किया जाएगा, जिसका अर्थ है कि पृष्ठ ऐसा महसूस करता है कि लोड होने में अधिक समय लगता है। यदि सभी जावास्क्रिप्ट अंत में ठीक से काम करने के लिए घटनाओं को प्राप्त करना थोड़ा कठिन है, लेकिन jQuery बहुत ज्यादा इस समस्या को हल करता है।

Comments

क्या आप बता सकते हैं कि jQuery ने इस समस्या को कैसे हल किया?

— मैथ्यू लॉक

jQuery के पास हैंडलर को घटनाओं के लिए बाध्य करने के लिए एपीआई है

— ड्रेमन