जवाबों:
सभी लिपियों को अंतिम लोड किया जाना चाहिए
हर मामले के बारे में, पृष्ठ के अंत में अपने सभी स्क्रिप्ट संदर्भों को रखना सबसे अच्छा है, ठीक पहले </body>।
यदि आप टेम्प्लेटिंग समस्याओं और व्हाट्सएप के कारण ऐसा करने में असमर्थ हैं, तो अपने स्क्रिप्ट टैग को इस deferविशेषता से सजाएं कि ब्राउज़र को HTML डाउनलोड होने के बाद आपकी स्क्रिप्ट डाउनलोड करना पता हो:
<script src="my.js" type="text/javascript" defer="defer"></script>किनारे के मामले
कुछ बढ़त मामलों, कर रहे हैं फिर भी, जहां पेज अस्थिर या पृष्ठ लोड के दौरान अन्य कलाकृतियों आम तौर पर सिर्फ अपनी jQuery स्क्रिप्ट संदर्भ रखकर हल किया जा सकता है जो अनुभव कर सकते हैं <head>टैग के बिनाdefer विशेषता। इन मामलों में jQuery UI और अन्य addons जैसे jCarousel या Treeview शामिल हैं जो DOM को उनकी कार्यक्षमता के हिस्से के रूप में संशोधित करते हैं।
आगे की बातें
कुछ पुस्तकालय हैं जिन्हें डोम या सीएसएस से पहले लोड किया जाना चाहिए, जैसे कि पॉलीफिल्स। मॉडर्निज़्र एक ऐसी लाइब्रेरी है जिसे हेड टैग में रखा जाना चाहिए ।
<head>। यदि आपका मार्कअप आपके लिए सामग्री को छांटने वाले jQuery प्लगइन पर निर्भर है, तो इसका कोई मतलब नहीं है कि प्लगइन संदर्भ को पेज के नीचे रख दिया जाए, क्योंकि आप प्लग-इन लोड होने तक अपने वेब पेज में फंकी मार्कअप प्राप्त करने जा रहे हैं। नियमों का पालन तब तक किया जाता है जब तक वे काम नहीं करते हैं, जिस बिंदु पर नियमों को तोड़ा जाना चाहिए।
स्क्रिप्ट के कारण समस्या यह है कि वे समानांतर डाउनलोड ब्लॉक करते हैं। HTTP / 1.1 विनिर्देश बताता है कि ब्राउज़र होस्टनाम प्रति समानांतर में दो से अधिक घटकों को डाउनलोड नहीं करते हैं। यदि आप कई होस्टनाम से अपनी छवियों की सेवा करते हैं, तो आप समानांतर में होने के लिए दो से अधिक डाउनलोड प्राप्त कर सकते हैं। हालांकि एक स्क्रिप्ट डाउनलोड हो रही है, हालाँकि, ब्राउज़र अलग होस्टनाम पर भी कोई अन्य डाउनलोड शुरू नहीं करेगा। कुछ स्थितियों में स्क्रिप्ट को नीचे ले जाना आसान नहीं है। यदि, उदाहरण के लिए, स्क्रिप्ट पृष्ठ की सामग्री का हिस्सा सम्मिलित करने के लिए document.write का उपयोग करती है, तो इसे पृष्ठ में कम नहीं ले जाया जा सकता है। वहाँ भी मुद्दों scoping हो सकता है। कई मामलों में, इन स्थितियों को हल करने के तरीके हैं।
एक वैकल्पिक सुझाव जो अक्सर आता है वह है आस्थगित लिपियों का उपयोग करना। DEFER विशेषता इंगित करती है कि स्क्रिप्ट में document.write नहीं है, और ब्राउज़रों के लिए एक संकेत है कि वे प्रतिपादन जारी रख सकते हैं। दुर्भाग्य से, फ़ायरफ़ॉक्स DEFER विशेषता का समर्थन नहीं करता है। इंटरनेट एक्सप्लोरर में, स्क्रिप्ट को स्थगित किया जा सकता है, लेकिन जितना वांछित नहीं है। यदि किसी स्क्रिप्ट को टाल दिया जा सकता है, तो उसे पृष्ठ के निचले भाग में भी ले जाया जा सकता है। इससे आपके वेब पेज तेजी से लोड होंगे।
संपादित करें: फ़ायरफ़ॉक्स संस्करण 3.6 के बाद से DEFER विशेषता का समर्थन करता है।
सूत्रों का कहना है:
केवल सिर में ही jQuery लोड करें, बेशक CDN के माध्यम से।
क्यों? कुछ परिदृश्यों में आप एम्बेडेड jQuery निर्भर कोड के साथ एक आंशिक टेम्पलेट (जैसे ajax लॉगिन फॉर्म स्निपेट) शामिल कर सकते हैं; यदि jQuery पृष्ठ तल पर लोड किया जाता है, तो आपको "$ परिभाषित नहीं किया गया" त्रुटि मिलती है, अच्छा है।
इस तरीके को हल करने के तरीके हैं (जैसे किसी JS को एम्बेड नहीं करना और लोड-एट-बॉटम js बंडल को जोड़ना), लेकिन क्यों lazily लोड किए गए js की स्वतंत्रता खो देते हैं, जो कहीं भी कृपया jQuery निर्भर कोड रखने में सक्षम हैं ? जावास्क्रिप्ट इंजन परवाह नहीं करता है जहां कोड डोम में रहता है जब तक निर्भरता (जैसे कि jQuery लोड किया जा रहा है) संतुष्ट हैं।
आपकी सामान्य / साझा की गई js फ़ाइलों के लिए, हां, उन्हें पहले रखें </body>, लेकिन अपवादों के लिए, जहां यह वास्तव में सिर्फ एक jQuery आश्रित स्निपेट या फ़ाइल संदर्भ को HTML में उस बिंदु पर छड़ी करने के लिए समझ में आता है।
सिर में कोई लोडिंग हिट जेकरी नहीं है; किस ब्राउज़र पर पहले से ही कैश में jQuery CDN फ़ाइल नहीं है?
ज्यादा कुछ नहीं के बारे में, सिर में jQuery छड़ी और अपने जे एस स्वतंत्रता शासन करते हैं।
2%, कहते हैं, पहली बार पृष्ठ लोड होने से पहले आधा निकल जाएगा। इस तरह से आप 1%आगंतुकों को खो रहे हैं , लेकिन संभावित रूप से अपने आप को विकास के समय और परेशानी से बचा रहे हैं। देखें कि क्या यह आपके व्यवसाय मॉडल के साथ समझ में आता है ...
निंबुज इसमें शामिल मुद्दे की बहुत अच्छी व्याख्या प्रदान करता है, लेकिन मुझे लगता है कि अंतिम उत्तर आपके पृष्ठ पर निर्भर करता है: उपयोगकर्ता के लिए अधिक महत्वपूर्ण क्या है - स्क्रिप्ट या चित्र?
कुछ पृष्ठ ऐसे हैं जो छवियों के बिना कोई मतलब नहीं रखते हैं, लेकिन केवल मामूली, गैर-आवश्यक स्क्रिप्टिंग है। उस स्थिति में यह स्क्रिप्ट को नीचे रखने के लिए समझ में आता है, इसलिए उपयोगकर्ता जल्द ही छवियों को देख सकता है और पृष्ठ की समझ बनाना शुरू कर सकता है। अन्य पेज काम करने के लिए स्क्रिप्टिंग पर भरोसा करते हैं। उस मामले में छवियों के साथ काम न करने वाले पृष्ठ की तुलना में छवियों के बिना एक कार्यशील पृष्ठ होना बेहतर है, इसलिए यह शीर्ष पर स्क्रिप्ट लगाने के लिए समझ में आता है।
एक और बात पर विचार करना है कि स्क्रिप्ट आमतौर पर छवियों से छोटी होती हैं। बेशक, यह एक सामान्यीकरण है और आपको यह देखना होगा कि क्या यह आपके पेज पर लागू होता है। यदि ऐसा होता है, तो मेरे लिए, उन्हें पहले नियम के रूप में अंगूठे के रूप में डालने का तर्क है (अर्थात जब तक कि अन्यथा करने का एक अच्छा कारण नहीं है), क्योंकि वे छवियों को विलंबित नहीं करेंगे, क्योंकि चित्र स्क्रिप्ट में देरी करेंगे। अंत में, शीर्ष पर स्क्रिप्ट रखना बहुत आसान है, क्योंकि आपको इस बारे में चिंता करने की ज़रूरत नहीं है कि क्या उन्हें अभी तक लोड किया गया है जब आपको उनका उपयोग करने की आवश्यकता होती है।
सारांश में, मैं डिफ़ॉल्ट रूप से स्क्रिप्ट को शीर्ष पर रखता हूं और केवल यह विचार करता हूं कि क्या यह पृष्ठ पूरा होने के बाद उन्हें नीचे की ओर ले जाना उचित है। यह एक अनुकूलन है - और मैं इसे समय से पहले नहीं करना चाहता।
अधिकांश jquery कोड तैयार दस्तावेज़ पर निष्पादित होता है, जो वैसे भी पृष्ठ के अंत तक नहीं होता है। इसके अलावा, पेज रेंडर को जावास्क्रिप्ट पार्सिंग / निष्पादन में देरी हो सकती है, इसलिए पेज के निचले भाग में सभी जावास्क्रिप्ट को डालना सबसे अच्छा अभ्यास है।
मानक अभ्यास आपकी सभी लिपियों को पृष्ठ के निचले भाग में रखना है, लेकिन मैं ASP.NET MVC का उपयोग कई jQuery प्लगइन्स के साथ करता हूं, और मुझे लगता है कि यह सब बेहतर काम करता है यदि मैं अपनी jQuery स्क्रिप्ट्स <head>को मास्टर के अनुभाग में रखता हूं। पृष्ठ।
मेरे मामले में, ऐसी कलाकृतियाँ हैं जो पृष्ठ लोड होने पर होती हैं, यदि स्क्रिप्ट पृष्ठ के निचले भाग में हों। मैं jQuery के वृक्ष दृश्य प्लगइन का उपयोग कर रहा हूं, और यदि स्क्रिप्ट शुरुआत में लोड नहीं हुई हैं, तो पेड़ प्लगइन द्वारा उस पर लगाए गए आवश्यक सीएसएस वर्गों के बिना प्रस्तुत करेगा। तो जब आप पहले पृष्ठ लोड करते हैं, तो ट्री व्यू के समुचित प्रतिपादन के बाद आपको यह अजीब दिखने वाला गड़बड़ मिलता है। बहुत बुरी लग रही है। <head>मास्टर पेज के सेक्शन में jQuery प्लगइन्स लगाने से यह समस्या समाप्त हो जाती है।
@Html.Action, जो गतिशील रूप से आउटपुट के लिए लिखता है, क्योंकि मेरा आंशिक $ is undefinedअर्थ देता है कि मुझे आंशिक लोड करने के लिए। लोड ('@ Url.Action') का उपयोग करना होगा। लेकिन यह अतिरिक्त अनुरोध के कारण एक दूषण देता है। आपके इनपुट के आधार पर, मैं सिर्फ अपने मास्टर पेज में RenderBody () से ऊपर के jquery को स्थानांतरित करूंगा
यद्यपि लगभग सभी वेब साइटें अभी भी हेडर पर Jquery और अन्य जावास्क्रिप्ट को रखती हैं: D, यहां तक कि stackoverflow.com की जाँच करें।
मैं आपको शरीर के अंतिम टैग से पहले डालने का सुझाव भी देता हूं। आप दोनों स्थानों पर रखने के बाद लोडिंग समय की जांच कर सकते हैं। स्क्रिप्ट टैग आपके वेबपृष्ठ को आगे लोड करने के लिए रोक देगा।
और जावास्क्रिप्ट को पाद पर रखने के बाद, आप अपने वेबपेज के असामान्य रूप को तब तक प्राप्त कर सकते हैं जब तक कि यह जावास्क्रिप्ट लोड न हो जाए, इसलिए अपने हेडर सेक्शन पर सीएसएस लगाएं।
इससे पहले </body>कि याहू डेवलपर नेटवर्क के बेस्ट प्रैक्टिसेज फॉर स्पीड अप योर वेब साइट इस लिंक के अनुसार सबसे अच्छी जगह है , यह समझ में आता है।
सबसे अच्छी बात यह है कि अपने आप से परीक्षण करें।
मेरे लिए jQuery थोड़ा खास है। शायद आदर्श के लिए एक अपवाद। ऐसी कई अन्य स्क्रिप्ट हैं जो इस पर निर्भर करती हैं, इसलिए यह काफी महत्वपूर्ण है कि यह जल्दी लोड हो जाती है इसलिए बाद में आने वाली अन्य स्क्रिप्ट भी उद्देश्य के अनुसार काम करेंगी। जैसा कि किसी और ने बताया कि यह पृष्ठ भी सिर अनुभाग में jQuery लोड करता है।