दिलचस्प पोस्ट
क्या करता है functools.wraps करते हैं? एक स्ट्रिंग के भीतर URL खोजने के लिए नियमित अभिव्यक्ति कैसे एक ArrayList सॉर्ट करने के लिए? पायथन – Excel स्प्रेडशीट में लिखें शब्द और अवधारणा के अर्थ को समझना – आरएआईआई (संसाधन अधिग्रहण प्रारंभ है) एकल-आवृत्ति अनुप्रयोग बनाने का सही तरीका क्या है? कैसे पृष्ठभूमिवर्कर के साथ जीयूआई अपडेट करें? उपश्रेणी बनाम जुड़ती है COUNT (*) बनाम COUNT (1) बनाम COUNT (पीके): जो बेहतर है? JavaFX सही स्केलिंग 3.1 रेलवे का उपयोग करते हुए, आप अपना "पृष्ठ विशिष्ट" जावास्क्रिप्ट कोड कहां डालते हैं? वर्तमान आईफोन / डिवाइस मॉडल का निर्धारण कैसे करें? "केवल कुछ लोगों के लिए मूल निवासी नहीं बनाया जा सकता" मैं NSArray को उद्देश्य-सी में कैसे बदल सकता हूँ? एनएसओपरेशन बनाम ग्रांड सेंट्रल डिस्पैच

स्वाभाविक जावास्क्रिप्ट: <script> शीर्ष पर या HTML कोड के नीचे?

मैंने हाल ही में अपनी वेब साइट को गति देने के लिए याहू घोषणा पत्र सर्वश्रेष्ठ प्रैक्टिस पढ़ा है। वे जब हम कर सकते हैं, तो HTML कोड के नीचे JavaScript को शामिल करने की सलाह देते हैं।

लेकिन जहां बिल्कुल और कब?

क्या हम इसे बंद करने से पहले </html> या उसके बाद रखना चाहिए? और सब से ऊपर, कब हम इसे <head> अनुभाग में डाल देना चाहिए?

वेब के समाधान से एकत्रित समाधान "स्वाभाविक जावास्क्रिप्ट: <script> शीर्ष पर या HTML कोड के नीचे?"

सचमुच अविश्वसनीय लिपियों के लिए दो संभावनाएं हैं:

  • सिर खंड में एक स्क्रिप्ट टैग के माध्यम से एक बाहरी स्क्रिप्ट फ़ाइल भी शामिल है
  • शरीर के नीचे एक स्क्रिप्ट टैग के माध्यम से एक बाहरी स्क्रिप्ट फ़ाइल सहित ( </body></html> )

दूसरा, जो मूल याहू रिसर्च के अनुसार तेजी से हो सकता है, कुछ ब्राउज़रों ने स्क्रिप्ट टैग को लोड करते समय स्क्रिप्ट फ़ाइलों को लोड करने का प्रयास किया और इसलिए वे पूरे पृष्ठ तक लोड न किए जाएं। हालांकि, यदि आपकी स्क्रिप्ट में एक 'तैयार' भाग है, जिसे डीओएम तैयार हो जाने पर आपको निष्पादित करना होगा, तो आपको इसे सिर में रखना होगा। एक अन्य मुद्दा लेआउट है – यदि आपकी स्क्रिप्ट पृष्ठ लेआउट को बदलना चाहती है, तो आप जितनी जल्दी हो सके लोड करना चाहते हैं, इसलिए आपका पेज आपके उपयोगकर्ताओं के सामने एक लंबा समय बिताने पर खर्च नहीं करता है।

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

और किसी भी प्रदर्शन के मुद्दे के लिए अपना खुद का मानदंड करें – एक बार जब कोई अध्ययन किया जाता है तो वह हो सकता है कि वह आपकी स्थानीय स्थापना या ब्राउज़र में बदलाव के साथ बदल सकता है।

यह कभी भी कट और सूखा नहीं है – याहू ने बंद करने से पहले लिपियों को डालने की सिफारिश की </body> टैग, जिससे भ्रम पैदा हो जाएगी कि खाली कैश में पृष्ठ तेजी से लोड हो रहा है (क्योंकि स्क्रिप्ट बाकी दस्तावेज़ को डाउनलोड करने से रोकेंगे नहीं )। हालांकि, यदि आपके पास कुछ कोड है जो आप पृष्ठ लोड पर चलाना चाहते हैं, तो यह पूरे पृष्ठ लोड होने के बाद ही निष्पादित करना प्रारंभ करेगा। यदि आप <head> टैग में स्क्रिप्ट डालते हैं, तो वे पहले निष्पादित करना शुरू कर देंगे – इसलिए एक primed कैश पर पृष्ठ वास्तव में तेज़ लोड करने के लिए दिखाई देगा

साथ ही, पेज के निचले हिस्से में स्क्रिप्ट डालने का विशेषाधिकार हमेशा उपलब्ध नहीं होता है यदि आपको अपने विचारों में इनलाइन स्क्रिप्ट शामिल करने की आवश्यकता होती है जो लाइब्रेरी या इससे पहले लोड होने वाले कुछ अन्य जावास्क्रिप्ट कोड पर निर्भर होती है, तो आपको उन निर्भरता को <head> टैग में लोड करना होगा।

सभी याहू की सभी सिफारिशों में दिलचस्प हैं लेकिन हमेशा लागू नहीं होते हैं और इन्हें केस-दर-मामला आधार पर माना जाना चाहिए।

जैसा कि दूसरों ने कहा है, इसे बंद करने वाले शरीर html टैग से पहले रखें।

दूसरे दिन हमारे ग्राहकों की शिकायत करने वाले ग्राहकों से कई कॉल बहुत धीमे थे हम स्थानीय रूप से उनसे गए और पाया कि उन्होंने एक पृष्ठ लोड करने के लिए 20-30 सेकंड का समय लिया। यह सोच रहा था कि सर्वर खराब प्रदर्शन कर रहा था, हमने लॉग इन किया – लेकिन वेब और एसक्यूएल दोनों सर्वर ~ 0% गतिविधि थे

कुछ ही मिनटों के बाद, हमें एहसास हुआ कि एक बाहरी साइट नीचे थी, जिसे हम जावास्क्रिप्ट ट्रैकिंग टैग के लिए जोड़ रहे थे। इसका मतलब था कि ब्राउज़र साइट के मुख्य भाग में स्क्रिप्ट टैग को मार रहे थे और स्क्रिप्ट फ़ाइल डाउनलोड करने का इंतजार कर रहे थे।

इसलिए, कम से कम 3 पार्टी / बाहरी लिपियों के लिए, मैं उन्हें पृष्ठ पर आखिरी चीज के रूप में रखने की सलाह देता हूं। तो अगर वे अनुपलब्ध थे, तो ब्राउज़र उस बिंदु तक कम से कम पृष्ठ को लोड करेगा – और उपयोगकर्ता इसके लिए अनजान होगा।

ऊपर दिए गए सुझावों के आधार पर संक्षेप करने के लिए:

  1. बाहरी लिपियों के लिए (Google एनालिटिक्स, तृतीय पक्ष मार्केटिंग ट्रैकर आदि) उन्हें </body> टैग से पहले रखें।
  2. पृष्ठ लेआउट को प्रभावित करने वाले स्क्रिप्ट के लिए, सिर में रखें
  3. स्क्रिप्ट जो "डोम तैयार" (जैसे jquery) पर भरोसा करते हैं, के लिए </body> से पहले रखने पर विचार करें, जब तक आपके पास सिर में स्क्रिप्ट रखने का किनारा नहीं होता है
  4. यदि निर्भरता के साथ इनलाइन स्क्रिप्ट हैं, सिर में आवश्यक स्क्रिप्ट रखें

नहीं, यह </html> बाद नहीं होना चाहिए क्योंकि यह अमान्य होगा। लिपियों को रखने का सबसे अच्छा स्थान </body> से ठीक पहले है

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

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

http://developer.yahoo.com/yslow/

यदि आप इसे नीचे डालते हैं, तो यह पिछले लोड होता है, इसलिए गति को गति दे रहा है कि उपयोगकर्ता पृष्ठ को देख सकता है। यह अंतिम </html> से पहले होना चाहिए, अन्यथा यह DOM का हिस्सा नहीं होगा।

अगर कोड को तुरन्त जरूरी है, तो उसे सिर में डाल दें।

ब्लॉग विजेट्स जैसी चीज़ों को नीचे रखने के लिए सबसे अच्छा यह है कि यदि वे लोड नहीं करते हैं, तो यह पृष्ठ की प्रयोज्यता को प्रभावित नहीं करता है