दस्तावेज़ के उद्देश्य को पराजित करने के लिए "नीचे में जावास्क्रिप्ट डाल" क्या पहले से ही है?

26

मुझे पता है कि जावास्क्रिप्ट को पेज के नीचे रखने की सिफारिश की गई है, लेकिन अगर मैं jQuery का उपयोग कर रहा हूं तो क्या यह इस उद्देश्य को नहीं हराएगा क्योंकि डोम लोड हो रहा है?

यदि मेरे पास ड्रॉपडाउन मेनू है, उदाहरण के लिए, ड्रॉपडाउन तब तक नहीं दिखाई देगा जब तक कि शेष पेज लोड नहीं हो जाता। मैं प्रगतिशील वृद्धि को ध्यान में रखते हुए विकसित करने की कोशिश करता हूं, इसलिए मेरे पास ऐसे तत्व हो सकते हैं जो सीएसएस के बजाय jQuery के साथ छिपे हुए हैं (इसलिए गैर-जेएस उपयोगकर्ता उन्हें देख सकते हैं)।

क्या एक खुशहाल माध्यम है, शायद?

javascript performance jquery

— DisgruntledGoat
स्रोत

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

3

क्या यह प्रश्न StackOverflow से अधिक नहीं है?

— मार्को डेमायो

30

किसी भी जावास्क्रिप्ट (http://www.learningjquery.com/2006/09/introducing-document-ready) को चलाने से पहले डॉक्यूमेंट लोड होने के लिए DOM का इंतजार करता है।

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

जेएस अभी भी चलता है जब सब कुछ लोड हो गया है, चाहे वह शुरू या खत्म हो।

— Callan
स्रोत

6

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

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

— मैका
स्रोत

3

जब तक HTML लोड करना समाप्त नहीं करता, तब तक स्क्रिप्ट का कोई वास्तविक उपयोग नहीं होता है - HTML लोड होने तक कोई स्क्रिप्ट DOM को बदल नहीं सकती है। document.readyडोम के लोड होने का इंतजार करता है। इसलिए, स्टाइलशीट जैसी महत्वपूर्ण चीजों को रखने का कोई मतलब नहीं है।

</body>अपने HTML और CSS को उपयोगकर्ता को जितनी जल्दी हो सके पाने के लिए पृष्ठ के नीचे ( टैग से पहले ) स्क्रिप्ट रखें । ब्राउज़र पेज को बहुत जल्दी रेंडर करने में सक्षम होगा और फिर स्क्रिप्ट को लोड किया जा सकता है, बजाय इसके कि उपयोगकर्ता को डाउनलोड करने के लिए स्क्रिप्ट्स का इंतजार करने के लिए खाली पेज छोड़ दें।

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

पेज के निचले भाग में स्क्रिप्ट लगाने का नुकसान यह है कि क्योंकि स्क्रिप्ट शुरू होने से पहले पेज रेंडर करेगा, विशेष रूप से क्विक क्लिकर्स जावास्क्रिप्ट तैयार होने से पहले आपकी साइट के साथ बातचीत करने में सक्षम होंगे।

नोट: विपरीत स्टाइल्सशीट्स के लिए सच है - पेज ब्लॉक के निचले हिस्से के पास स्टाइल्सशीट प्रगतिशील प्रतिपादन प्रदान करता है जब तक कि सभी स्टाइलशीट्स को डाउनलोड नहीं किया गया है और उन्हें दस्तावेज़ में ले जाने HEADसे समस्या समाप्त हो जाती है।

उपयोगकर्ता को प्रतीक्षा किए बिना जावास्क्रिप्ट लोड करने के लिए एक साफ चाल है, आप <script/>DOM createElement()विधि का उपयोग करके एक तत्व बना सकते हैं और समापन </body>टैग से ठीक पहले इसे पृष्ठ पर जोड़ सकते हैं :

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

ब्राउज़र तब तक js स्क्रिप्ट डाउनलोड करना शुरू नहीं करता है जब तक कि नया <script/>तत्व वास्तव में पृष्ठ पर नहीं जोड़ा जाता है। एक बार डाउनलोड पूरा होने के बाद, ब्राउज़र जावास्क्रिप्ट कोड की व्याख्या करता है जो भीतर निहित होता है।

— टॉम
स्रोत

1

पूरी तरह से सच नहीं है। स्क्रिप्ट सभी HTML लोड होने से पहले DOM को बदल सकती है ... वास्तव में इसलिए स्क्रिप्ट्स ब्लॉक हो रही हैं क्योंकि वे पेज को बदल सकते हैं । कहा कि, कई मामलों में डेवलपर्स को अपना 'व्यवहार' स्क्रिप्ट जोड़ने की आवश्यकता नहीं होती है जब तक कि डोम लोड नहीं किया जाता है।

— स्क्यूलिफ़े

1

हाँ। यदि आप स्क्रिप्ट को नीचे रखते हैं, तो doc.ready( DOMContentLoadedईवेंट) की अब कोई आवश्यकता नहीं है - आपकी स्क्रिप्ट को वैसे भी निष्पादित किया जाएगा जब तक कि पूर्ववर्ती डोम को किसी भी तरह लोड नहीं किया जाता है।

चूंकि अंत में लिपियों के प्रदर्शन में सुधार होता है (सीएसएस और लोडिंग सीएसएस और छवियों के लोडिंग को स्क्रिप्ट द्वारा अवरुद्ध नहीं किया जाता है) मैं उपयोग करने के बजाय नीचे स्क्रिप्ट डालने की सलाह देता हूं doc.ready।

— कोर्नेल
स्रोत