मैंने हाल ही में याहू मेनिफेस्टो बेस्ट प्रैक्टिसेज फॉर स्पीडिंग अप योर वेब साइट को पढ़ा है । जब हम कर सकते हैं तो वे HTML कोड के नीचे जावास्क्रिप्ट को शामिल करने की सलाह देते हैं।
लेकिन वास्तव में कहां और कब?
क्या हमें इसे बंद करने से पहले </html>या बाद में रखना चाहिए ? और सबसे बढ़कर, तब भी हमें इसे <head>खंड में रखना चाहिए ?
जवाबों:
वास्तव में विनीत लिपियों के लिए दो संभावनाएँ हैं:
</body></html>) स्क्रिप्ट स्क्रिप्ट के माध्यम से एक बाहरी स्क्रिप्ट फ़ाइल सहितदूसरा तेजी से हो सकता है क्योंकि मूल याहू अनुसंधान ने दिखाया कि कुछ ब्राउज़र स्क्रिप्ट स्क्रिप्ट को हिट करते समय स्क्रिप्ट फ़ाइलों को लोड करने का प्रयास करते हैं और इसलिए शेष पेज को तब तक लोड नहीं करते जब तक कि वे समाप्त नहीं हो जाते। हालाँकि, यदि आपकी स्क्रिप्ट में एक 'रेडी' भाग है, जिसे डोम के तैयार होते ही निष्पादित करना होगा तो आपको इसे सिर में लगाना पड़ सकता है। एक अन्य मुद्दा लेआउट है - यदि आपकी स्क्रिप्ट पृष्ठ लेआउट को बदलने जा रही है, तो आप इसे जल्द से जल्द लोड करना चाहते हैं, इसलिए आपका पेज अपने उपयोगकर्ताओं के सामने खुद को फिर से तैयार करने में एक लंबा समय खर्च नहीं करता है।
यदि बाहरी स्क्रिप्ट साइट किसी अन्य डोमेन (बाहरी विजेट की तरह) पर है, तो यह पृष्ठ के लोड में देरी से बचने के लिए इसे नीचे रखने के लायक हो सकता है।
और किसी भी प्रदर्शन के मुद्दों के लिए अपने स्वयं के बेंचमार्क करते हैं - एक समय में क्या सच हो सकता है जब एक अध्ययन किया जाता है अपने स्वयं के स्थानीय सेटअप या ब्राउज़रों में परिवर्तन के साथ बदल सकता है।
यह इतना कटा हुआ और सूखा कभी नहीं है - याहू बंद </body>टैग से ठीक पहले स्क्रिप्ट लगाने की सलाह देता है , जिससे भ्रम पैदा होगा कि पेज एक खाली कैश पर तेजी से लोड होता है (क्योंकि स्क्रिप्ट दस्तावेज़ के बाकी हिस्सों को डाउनलोड करने से नहीं रोकेंगे)। हालाँकि, यदि आपके पास कुछ कोड हैं जिन्हें आप पृष्ठ लोड पर चलाना चाहते हैं, तो यह केवल पूरे पृष्ठ को लोड करने के बाद निष्पादित करना शुरू कर देगा। यदि आप स्क्रिप्ट में डाल दिया<head> टैग में रखते हैं, तो वे पहले निष्पादित करना शुरू कर देंगे - इसलिए एक प्राइमेड कैश पर पेज वास्तव में तेजी से लोड होता दिखाई देगा।
इसके अलावा, स्क्रिप्ट को पृष्ठ के निचले भाग पर रखने का विशेषाधिकार हमेशा उपलब्ध नहीं होता है। यदि आपको अपने विचारों को इनलाइन स्क्रिप्ट में शामिल करने की आवश्यकता है जो एक पुस्तकालय या किसी अन्य जावास्क्रिप्ट कोड पर पहले लोड होने पर निर्भर करते हैं, तो आपको उन विभिन्नताओं को लोड करना होगा<head> टैग ।
याहू की सभी सिफारिशें दिलचस्प हैं लेकिन हमेशा लागू नहीं होती हैं और इसे केस-बाय-केस आधार पर माना जाना चाहिए।
<script>टैग्स ऑब्सट्रक्टिव जावास्क्रिप्ट को इंप्रेस नहीं करते हैं।
<script>टैग मार्कअप से अलग हैं और कोड के साथ उपयोग किया जा सकता है जो इंटरफ़ेस को बढ़ाता है लेकिन आवश्यक नहीं है। तो इनलाइन <script>टैग के बारे में स्वाभाविक रूप से कुछ भी अप्रिय नहीं है ।
<script>उन मूल्यों को जावास्क्रिप्ट चर में सांकेतिक शब्दों में बदलना करने के लिए टैग का उपयोग कर सकते हैं , शायद उपयोग के लिए इनलाइन संपादन या अन्य समान व्यवहार।
के रूप में अन्य लोगों ने कहा, बंद करने से पहले यह जगह शरीर एचटीएमएल टैग।
दूसरे दिन हमारे ग्राहकों के पास कई शिकायतें थीं कि उनकी साइट्स बेहद धीमी थीं। हमने उन्हें स्थानीय रूप से देखा और पाया कि उन्हें एक पेज लोड करने में 20-30 सेकंड लगे। यह सोचकर कि यह सर्वर खराब प्रदर्शन कर रहा था, हमने लॉग ऑन किया - लेकिन वेब और एसक्यूएल सर्वर दोनों ~ 0% गतिविधि थे।
कुछ मिनटों के बाद, हमें एहसास हुआ कि एक बाहरी साइट नीचे है, जिसे हम जावास्क्रिप्ट ट्रैकिंग टैग के लिए लिंक कर रहे थे। इसका मतलब था कि ब्राउज़र स्क्रिप्ट टैग को सिर में मार रहे थे साइट सेक्शन और स्क्रिप्ट फ़ाइल डाउनलोड करने की प्रतीक्षा कर रहे थे।
तो, कम से कम 3 पार्टी / बाहरी स्क्रिप्ट के लिए, मैं उन्हें पेज पर अंतिम चीज़ के रूप में डालने की सलाह दूंगा। तब यदि वे अनुपलब्ध थे, तो ब्राउज़र कम से कम उस बिंदु तक पृष्ठ को लोड करेगा - और उपयोगकर्ता इसके लिए बेखबर होगा।
संक्षेप में, उपरोक्त सुझावों के आधार पर:
</body>टैग से पहले रखें ।</body>तब तक रखने से पहले विचार करें जब तक कि आपके पास स्क्रिप्ट को सिर में रखने का कोई कारण न हो।यदि आप अपनी स्क्रिप्ट की स्थिति के साथ टिंकर करना चाहते हैं, तो YSlow आपको एक स्वाद देने के लिए एक बढ़िया उपकरण है यदि यह प्रदर्शन में सुधार करने या चोट पहुंचाने वाला है। कुछ दस्तावेज़ स्थितियों में जावास्क्रिप्ट डालना वास्तव में पृष्ठ लोड समय को मार सकता है।
नहीं, ऐसा नहीं होना चाहिए </html>क्योंकि यह अमान्य होगा। स्क्रिप्ट लगाने के लिए सबसे अच्छी जगह सही से पहले है</body>
यह मूल रूप से है क्योंकि अधिकांश ब्राउज़र पृष्ठ को प्रदान करना बंद कर देते हैं जब वे आपके द्वारा प्रदान की गई स्क्रिप्ट को निकालते हैं। तो पृष्ठ में कहीं भी गैर-अवरोधक कोड डालने के लिए इसका ठीक है (मैं मुख्य रूप से उन चीजों के बारे में सोच रहा हूं जो फ़ंक्शन से जुड़ते हैं onLoad, क्योंकि इवेंट बाइंडिंग इतनी तेजी से प्रभावी रूप से मुक्त होने के लिए है)। यहां एक बड़ा हत्यारा कुछ विज्ञापन सर्वर स्क्रिप्ट में डालने वाले पृष्ठ की शुरुआत में है, जो विज्ञापनों को पूरी तरह से डाउनलोड होने से पहले पृष्ठ लोड करने से रोक सकता है, जिससे आपका पृष्ठ लोड समय गुब्बारा बन जाएगा
यदि आप इसे सबसे नीचे रखते हैं, तो यह अंतिम लोड हो जाता है, इसलिए उपयोगकर्ता द्वारा पृष्ठ को देखने की गति तेज हो सकती है। यह फाइनल से पहले होना चाहिए, </html>हालांकि यह DOM का हिस्सा नहीं होगा।
यदि कोड की तुरंत आवश्यकता है, तो इसे सिर में रखें।
ब्लॉग विजेट जैसी चीजों को नीचे रखना सबसे अच्छा है ताकि अगर वे लोड न करें, तो यह पृष्ठ की उपयोगिता को प्रभावित नहीं करता है।