$ (Document) .ready (function () {}); पृष्ठ के नीचे स्क्रिप्ट बनाम


जवाबों:


142

अपने आप में बहुत कम या तो, जिस तरह से आप पर काम करने के लिए DOM तैयार हो जाएगा (मैं इस बारे में घबरा गया था जब तक कि मैं Google से इसे नहीं पढ़ता )। यदि आप पेज ट्रिक के अंत का उपयोग करते हैं, तो आपके कोड को थोड़ी-थोड़ी, थोड़ी-थोड़ी जल्दी कहा जा सकता है, लेकिन ऐसा कुछ भी नहीं है। लेकिन इससे भी महत्वपूर्ण बात यह है कि यह विकल्प आपके जावास्क्रिप्ट को पेज में लिंक करने के स्थान से संबंधित है।

यदि आप अपने scriptटैग को इसमें शामिल करते हैं headऔर भरोसा करते हैं ready, scriptतो उपयोगकर्ता को कुछ भी प्रदर्शित करने से पहले ब्राउज़र आपके टैग का सामना करता है। घटनाओं के सामान्य पाठ्यक्रम में, ब्राउज़र एक डरावना पड़ाव पर आता है और आपकी स्क्रिप्ट को डाउनलोड करता है और डाउनलोड करता है, जावास्क्रिप्ट दुभाषिया को आग लगाता है, और इसे स्क्रिप्ट को सौंपता है, फिर प्रतीक्षा करता है जबकि दुभाषिया स्क्रिप्ट की प्रक्रिया करता है (और फिर jQuery के विभिन्न तरीकों से देखता है डोम के लिए तैयार होने के लिए)। (मैं कहता हूं "चीजों के सामान्य पाठ्यक्रम में" क्योंकि कुछ ब्राउज़र टैग पर asyncयाdefer विशेषताओं का समर्थन करते हैं script।)

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

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

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


17
+1। Js लोड होने से पहले बातचीत से निपटने का एक और तरीका है कि पेज वर्क को बिना जावास्क्रिप्ट के साथ शुरू किया जाए। सुनिश्चित करें कि सभी लिंक काम करते हैं आदि, हालांकि वे निश्चित रूप से एक पृष्ठ पुनः लोड करेंगे। फिर js के साथ लिंक और अन्य सामान को हाईजैक करें, और अपने अजाक्स या अन्य घंटियाँ और सीटी जोड़ें :)
एड्रियन श्मिट

1
आप एक कार्रवाई की कतार से कैसे निपटेंगे? वहाँ एक डिजाइन पैटर्न या कुछ "आम समाधान" है कि मैं इस बारे में देख सकते हैं?
HC_

@HC_: "कतारबद्ध क्रिया" से आपका क्या अभिप्राय है?
टीजे क्राउडर

@TJCrowder आपके उत्तर के अंतिम वाक्य से: "या, बेहतर, उस चीज़ को कतारबद्ध करें जो वे करना चाहते थे और तब करें जब आपकी पूरी स्क्रिप्ट तैयार हो।" मैं बस सोच रहा था, अगर ऐसा करने के "इष्टतम" तरीके हैं, क्योंकि मुझे यकीन है कि मैं ऐसा करने के "कुछ" तरीके का पता लगा सकता हूं, लेकिन मुझे यकीन है कि यह होगा ... अगर किसी और ने कभी भी फेंक दिया। जो भी कोड शामिल है पर देखा।
HC_

2
@HC_: मैंने कभी ऐसा करने की आवश्यकता महसूस नहीं की है, और इसके लिए किसी विशेष मानक का पता नहीं है। और पांच साल बाद, मुझे लगता है कि इसके बजाय "क्षमा करें, लोड करना, एक सेकंड .." के साथ जाना बेहतर होगा। (यदि बातें हैं हालांकि कि लोड करने के लिए धीमी गति से, आप एक बड़ा समस्या है।) यदि मैं देख रहा हूँ कुछ मुझे लगता है कि क्लिक करने योग्य है, और यह क्लिक करें, और कुछ नहीं होता, स्वर्ग केवल क्या मैं अगले क्लिक करेंगे जानता है। यदि आप उन्हें कतारबद्ध करते हैं और फिर तैयार होने पर उन्हें वापस खेलते हैं, तो यह आदर्श से कम हो सकता है।
टीजे क्राउडर

3

आपका पेज बिखरने से धीमी गति से लोड होगा $(document).ready()(अंत में सभी के बजाय) डोम भर लिपियों क्योंकि यह jQuery की आवश्यकता होने के लिए तुल्यकालिक पहले से भरी हुई।

$ = jQuery। तो आप $अपनी स्क्रिप्ट में पहले लोड किए बिना jQuery का उपयोग नहीं कर सकते । यह दृष्टिकोण आपको पेज की शुरुआत के पास jQuery लोड करने के लिए मजबूर करता है, जो कि jQuery पूरी तरह से डाउनलोड होने तक आपके पेज लोड को रोक देगा

आप asyncjQuery लोड नहीं कर सकते क्योंकि कई मामलों में, आपकी $(document).ready()स्क्रिप्ट (s) jQuery पूरी तरह से async लोड होने से पहले निष्पादित करने का प्रयास करेगी और त्रुटि का कारण बन सकती है, क्योंकि फिर से, $अभी तक परिभाषित नहीं है।

कहा जा रहा है, सिस्टम को बेवकूफ बनाने का एक तरीका है। अनिवार्य रूप $से एक फ़ंक्शन के बराबर सेट करना जो $(document).ready()फ़ंक्शन को एक कतार / सरणी में धकेलता है । फिर पृष्ठ के निचले भाग में, jQuery लोड करें फिर कतार के माध्यम से पुनरावृत्त करें और $(document).ready()एक बार में प्रत्येक को निष्पादित करें । यह आपको पृष्ठ के निचले भाग में jQuery को स्थगित करने की अनुमति देता है लेकिन फिर भी $डोम में इसके ऊपर का उपयोग करें । मैंने व्यक्तिगत रूप से परीक्षण नहीं किया है कि यह कितनी अच्छी तरह काम करता है, लेकिन सिद्धांत ध्वनि है। विचार कुछ समय के लिए रहा है, लेकिन मैंने इसे लागू किया है, बहुत कम ही देखा गया है। लेकिन यह एक महान विचार की तरह लगता है:

http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.