jQuery टैग के अंत में jQuery ले जाएं?

Question

मेरे दोस्त ने एक लेख पढ़ा है जिसमें बताया गया है कि सभी जावास्क्रिप्ट फ़ाइलों को बंद शरीर टैग (</body>) के अंत में ले जाना, वेब पेज के प्रदर्शन में सुधार करेगा।

मैंने JQuery और जेएस फ़ाइलों को छोड़कर सभी जेएस फ़ाइलों को अंत में स्थानांतरित कर दिया है जो पृष्ठ पर किसी तत्व को ईवेंट से जोड़ रहे हैं, जैसे नीचे;

$(document).ready(function(){ 
    //submit data 
    $("#create_video").click(function(){ //... }); 
}); 

लेकिन वह jQuery लाइब्रेरी फ़ाइल को बॉडी टैग के अंत में ले जाने के लिए कह रहा है।

मुझे नहीं लगता कि यह संभव है, क्योंकि मैं jQuery चयनकर्ताओं का उपयोग करके लोड पर पेज तत्वों को कई घटनाओं को जोड़ रहा हूं, और jQuery चयनकर्ताओं का उपयोग करने के लिए पहले jQuery लाइब्रेरी को लोड करना होगा।

क्या शरीर टैग (</body>) बंद करने से पहले पृष्ठ के अंत में JQuery लाइब्रेरी फ़ाइल को स्थानांतरित करना संभव है ??

धन्यवाद

Answer 1

तक डोम instantiated किया जा रहा समाप्त हो गया है $(document).ready समारोह को चलाने के लिए नहीं कहते हैं - तो बाद शरीर जब तक कि JQuery पुस्तकालय पहले भरी हुई है ठीक है पर ले जाकर। अपरंपरागत और कुछ धारणाएं अब और सही नहीं हो सकती हैं लेकिन ठीक है।

Answer 2

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

आपके उपयोगकर्ताओं के लिए इसका क्या अर्थ है कि वे एक खाली स्क्रीन देखेंगे। उन्हें पूर्ण (आईएसएच) पृष्ठ देखने के लिए बहुत बेहतर है, ऐसा लगता है कि ऐसा लगता है कि यह रुक गया है।

Answer 3

बस उस खाते में है कि jQuery जावास्क्रिप्ट फ़ाइल$(...) समारोह के लिए किसी भी कॉल करने से पहले लोड किया जाना चाहिए में ले लो।

Answer 4

अविभाज्य जावास्क्रिप्ट का उपयोग करें (ईवेंट श्रोताओं को onclik = "..." आदि के बजाय तत्वों में जोड़ना)। मुख्य लाइब्रेरी (इस मामले में jQuery) के साथ पहले आपके सभी .js फ़ाइलों को बॉडी टैग के नीचे रखें, और सबकुछ ठीक होगा। आप bundle fu

जैसे बंडलर का उपयोग कर सकते हैं आप अपने पृष्ठ को लोड करने का एक बड़ा प्रदर्शन बढ़ावा देखेंगे।

Answer 5

क्यू - क्यों मैं अक्सर देख पा रहे हैं जावास्क्रिप्ट लिखा/एक (एक्स) HTML दस्तावेज़ में समापन शरीर तत्व से पहले शामिल?

ए - डीओएम तत्वों को तक जावास्क्रिप्ट द्वारा एक्सेस नहीं किया जा सकता है जब तक ब्राउज़र में HTML तत्वों को DOM में लोड नहीं किया जाता है। (समापन शरीर तत्व से पहले) एक (एक्स) HTML दस्तावेज़ के अंत में जावास्क्रिप्ट रखने से, आप यह सुनिश्चित करेंगे कि स्क्रिप्ट जैसे ही डोम निर्माण/भरी हुई और हेरफेर के लिए तैयार है कहा जाता है। इस दृष्टिकोण का एक लाभ यह है कि जावास्क्रिप्ट कोड डीओएम के निर्माण के ठीक बाद निष्पादित किया गया है और ऑनलोड ईवेंट से पहले संभवतः आग लग जाएगी।

जावास्क्रिप्ट शुरुआती लगातार कोड रखने कि एक (एक्स) HTML दस्तावेज़ के शीर्ष लेख तत्व में डोम manipulates द्वारा इस से फिसल गया मिलता है। यह त्रुटि का कारण बनता है क्योंकि DOM के पास अभी तक नहीं बनाया गया है और इस प्रकार जावास्क्रिप्ट के लिए अभी तक पहुंच योग्य नहीं है डीओएम ट्रैवर्स/मैनिपुलेट्स।

JavaScript Execution & Onload Techniques in Web Browsers

Answer 6

कारण यह है कि लेख नीचे करने के लिए स्क्रिप्ट को स्थानांतरित करने के लिए कहा से, पहले डाउनलोड करने के लिए अन्य कलाकृतियों अनुमति है। (सीएसएस & छवियां, जो स्पष्ट प्रतिपादन समय को गति देगी)

ऐसा इसलिए है क्योंकि HTTP 1.1 प्रति मेजबान नाम केवल 2 आइटम डाउनलोड करने की अनुशंसा करता है। और आप निश्चित रूप से अपनी सीएसएस फ़ाइल को जावास्क्रिप्ट के बजाए डाउनलोड की गई पहली फाइलों में से एक बनना चाहते हैं जो साइट धीमा करने के लिए दिखाई दे सकती है (केवल इस तथ्य से कि ब्राउज़र को अभी तक सीएसएस फ़ाइल नहीं मिली है और यह सुनिश्चित नहीं है एचटीएमएल के साथ क्या करना चाहिए)

लेकिन यदि आपने google to host your jQuery का उपयोग किया है तो यह समानांतर में डाउनलोड होगा और इसे आपके पृष्ठों के नीचे ले जाने के किसी भी कारण को अस्वीकार कर देगा।

वैकल्पिक रूप से, आप स्थैतिक सामग्री (जैसे सीएसएस/स्क्रिप्ट/छवियों) होस्ट करने के लिए दूसरा होस्टनाम सेट अप कर सकते हैं।

लेकिन Google ने आपके लिए पहले ही कड़ी मेहनत की है, इसलिए यदि यह उपयुक्त हो तो इसका उपयोग करना समझ में आता है। :-)

Answer 7

jQuery लोड होने के बाद निष्पादित किए जाने वाले कार्यों को एकत्रित करने के लिए "डोम रेडी कतार" का उपयोग करें और डोम तैयार है।

उदाहरण:

<html> 
    <head> 
    <script type="text/javascript"> 
     var domReadyQueue = []; 
    </script> 
    </head> 
    <body> 
    ... 
    <div class="foo"></div> 
    <script type="text/javascript"> 
    domReadyQueue.push(function($){ 
     $('.foo').doSomething(); 
    }) 
    </script> 
    ... 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
    jQuery(function(){ 
     while (domReadyQueue.length) { 
     domReadyQueue.shift()(jQuery); 
     } 
    }); 
    </script> 
    </body> 
</html>