वेब पेज लोडिंग को गति देने के लिए जावास्क्रिप्ट अनुकूलन

Google के इंजीनियर और वेब प्रदर्शन और अनुकूलन पर तीन पुस्तकों के लेखक, स्टीव सौडर्स ने जावास्क्रिप्ट प्रदर्शन की एक प्रस्तुति प्रकाशित की है कि स्क्रिप्ट को धीमा करने के लिए पेज लोड करने के लिए किन तरीकों का उपयोग करना है।

WebPagetest के आँकड़ों के अनुसार, एलेक्सा टॉप 100 की साइटों पर .js फ़ाइलों को लोड करने से ब्लॉक करने पर औसतन औसत पृष्ठ लोड समय 3.65 s से घटकर 2.487 s , यानी 31% कम हो जाता है। यदि आप वेब पेजों की धीमी गति से लोडिंग देखते हैं और इस सूचक को बेहतर बनाना चाहते हैं, तो, स्टीव सॉडर्स के अनुसार, पहली चीज जिसे आपको जावास्क्रिप्ट में देखना होगा।

स्टीव सोडर्स अनुकूलन के उदाहरण के रूप में Google Analytics स्निपेट का हवाला देते हैं।

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 

वह रेखा पर विशेष ध्यान देता है

 ga.async = true; 

इस पैरामीटर का मतलब है कि ga.js स्क्रिप्ट अन्य अतुल्यकालिक स्क्रिप्ट के निष्पादन को अवरुद्ध नहीं करेगी।

एक अन्य बिंदु insertBefore । यह पता चलता है कि कुछ ब्राउज़र स्क्रिप्ट निष्पादन को insertBefore यदि insertBefore स्टेटमेंट वाली स्क्रिप्ट अभी तक लोड नहीं हुई है। स्वाभाविक रूप से, यह लोडिंग पृष्ठ को धीमा कर देता है। दूसरे शब्दों में, ऐसे ब्राउज़र Google Analytics मॉड्यूल पृष्ठ पर लोड होने तक प्रतीक्षा करेंगे, और उस क्षण तक अन्य सभी लिपियों को अवरुद्ध कर दिया जाएगा। Ga.async = सही पैरामीटर कई आधुनिक ब्राउज़रों में स्थिति को ठीक करता है। लेकिन बिलकुल नहीं।

स्टीव सॉडर्स ने उन ब्राउज़र संस्करणों की पहचान करने के लिए एक विशेष पृष्ठ बनाया, जो कि GA.async = सत्य insertBefore अनदेखा करते हैं यदि insertBefore । उन्होंने 60+ विभिन्न ब्राउज़रों से आंकड़े एकत्र किए - जैसा कि आप लिंक द्वारा तालिका में देख सकते हैं, मुख्य "वायलेटर" ओपेरा ब्राउज़र है। परीक्षण चलाएं और यहां जांचें।

जावास्क्रिप्ट प्रदर्शन पर एक प्रस्तुति में, स्टीव सोडर्स कंट्रोलजेएस लिपियों के लोडिंग को गति देने के लिए एक मॉड्यूल के बारे में बात करते हैं, साथ ही साथ कैश के रूप में लोकलस्टोरेज का उपयोग करते हैं।