प्रदर्शन को अनुकूलित करने के लिए जावास्क्रिप्ट को एक पृष्ठ में लोड करने का सबसे अच्छा तरीका क्या है?
जवाबों:
कुछ चीजें हैं जो आप कर सकते हैं:
जावास्क्रिप्ट से पहले HTML और CSS को लोड करें। यह ब्राउज़र को वह सब कुछ देता है जो उसे पृष्ठ को बिछाने और उसे प्रस्तुत करने की आवश्यकता होती है। इससे उपयोगकर्ता को यह आभास होता है कि पृष्ठ व्यर्थ है। स्क्रिप्ट टैग या ब्लॉक को संभव के रूप में बंद बॉडी टैग के करीब रखें।
CDN का उपयोग करने पर विचार करें। यदि आप JQuery जैसी किसी भी लोकप्रिय लाइब्रेरी का उपयोग कर रहे हैं, तो कई कंपनियां (जैसे कि google, yahoo) मुफ्त CDN संचालित करती हैं, जिसका उपयोग आप पुस्तकालयों को लोड करने के लिए कर सकते हैं।
लोड कोड एक एम्बेडेड स्क्रिप्ट के बजाय एक बाहरी फ़ाइल को क्रोन करता है। यह ब्राउज़र को जेएस कंटेंट को कैश करने का मौका देता है और इसे बिलकुल लोड नहीं करना पड़ता है। क्रमिक पृष्ठ लोड तेजी से होगा।
वेब सर्वर पर ज़िप संपीड़न चालू करें।
याहू के पास सुझावों का एक बड़ा पृष्ठ है जो पृष्ठ लोड समय को कम करने में मदद कर सकता है।
मिनिफिंग, गज़िपिंग और सीडीएनिंग (नया शब्द?) के अलावा। आपको डिफर लोडिंग पर विचार करना चाहिए। मूल रूप से यह क्या करता है लिपियों को गतिशील रूप से जोड़ा जाता है और अवरुद्ध को रोकने, समानांतर डाउनलोड की अनुमति देता है।
इसे करने के कई तरीके हैं, यह वह है जिसे मैं पसंद करता हूं
<script type="text/javascript">
function AttachScript(src) {
window._sf_endpt=(new Date()).getTime();
var script = document.createElement("script");
document.getElementsByTagName("body")[0].appendChild(script);
script.src = src;
}
AttachScript("/js/scripts.js");
AttachScript("http://www.google-analytics.com/ga.js");
</script>समापन बॉडी टैग से ठीक पहले रखें और प्रत्येक js फ़ाइल को लोड करने के लिए अटैचस्क्रिप्ट का उपयोग करें।
यहाँ कुछ और जानकारी http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
आप उस तरीके को देखना चाहते हैं जिस तरह से Google Analytics को लोड करता है:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
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);
})();
</script>जैसा कि इसे स्क्रिप्ट का "सर्वोत्तम अभ्यास" माना जाता है:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/
Google के कुछ लोगों ने वेलोसिटी 2010 में एक नए ओपन सोर्स प्रोजेक्ट की घोषणा की जिसे डिफेबल कहा जाता है । असंभव कुछ जादू को केवल जेएस, एचटीएमएल और सीएसएस के कुछ हिस्सों को प्रकाशित करने के लिए करता है, जो उस संस्करण के बाद से बदल गए हैं जो उपयोगकर्ता के कैश में संग्रहीत है, बजाय एक नया संस्करण जारी किए जब एक पूरी नई फ़ाइल भेजने के लिए।
यह तकनीक वेबसाइटों पर बहुत अच्छी तरह से शांत है, और वर्तमान में सबसे प्रभावी (और प्रयास के लायक) उन वेबसाइटों पर है जहां आप एक छोटे से कोड परिवर्तन के साथ बड़े जावास्क्रिप्ट कोड आधार का उपयोग कर रहे हैं। यह विशेष रूप से Google मानचित्र जैसे अनुप्रयोगों पर लागू होता है, जो प्रत्येक मंगलवार को कम से कम एक रिलीज़ से गुजरता है , और वर्ष में लगभग 100 नए रिलीज़ करता है। एचटीएमएल 5 स्थानीय भंडारण अधिक व्यापक हो जाने के बाद यह सामान्य रूप से बहुत मायने रखता है।
BTW, अगर आपने Google के माइकल जोन्स को परिवर्तन (भू-स्थानिक संदर्भ में) के बारे में बात करते नहीं देखा है, तो यह GeoWeb 2009 में उनके पूरे मुख्य वक्ता के रूप में देखने लायक है ।
इस सवाल का अपडेट देने के लिए। मुझे लगता है कि आधुनिक में, गैर-अवरुद्ध लोडिंग के तरीके की अब आवश्यकता नहीं है, ब्राउज़र इसे आपके लिए करेगा।
मैंने StackOverflow में एक प्रश्न जोड़ा है, मैं यहाँ सामग्री जोड़ दूँगा।
अंतर केवल इतना है कि लोड घटना को थोड़ी देर पहले निकाल दिया जाएगा, लेकिन फ़ाइलों का लोडिंग स्वयं ही रहता है। मैं यह भी जोड़ना चाहता हूं कि अगर नॉन-ब्लॉकिंग स्क्रिप्ट के साथ ऑनलोड पहले भी आग लग जाती है, तो इसका मतलब यह नहीं है कि जेएस फाइलें पहले से खराब हो गई हैं। मेरे मामले में सामान्य सेटअप सबसे अच्छा था
अब पहले स्क्रिप्ट्स, वे इस तरह दिखते हैं:
<script>
(function () {
var styles = JSON.parse(myObject.styles);
for( name in styles ){
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', styles[name]);
document.getElementsByTagName('head')[0].appendChild(link);
}
var scripts = JSON.parse(myObject.scripts);
for( name in scripts ){
var e = document.createElement('script');
e.src = scripts[name];
e.async = true;
document.getElementsByTagName('head')[0].appendChild(e);
}
}());
</script>myObject.styles यहाँ सिर्फ एक ऑब्जेक्ट है जो सभी फाइलों के लिए सभी यूआरएल रखता है।
मैंने 3 परीक्षण किए हैं, यहां परिणाम हैं:
सामान्य सेटअप
यह सिर्फ सामान्य सेटअप है, हमारे पास सिर में 4 सीएसएस फाइलें हैं, और पेज के नीचे 3 सीएसएस फाइलें हैं।
अब मुझे कुछ भी अवरुद्ध नहीं दिख रहा है। मैं क्या देखता हूं कि सब कुछ एक ही समय में लोड हो रहा है।
गैर-अवरुद्ध जेएस
अब इसे थोड़ा आगे ले जाने के लिए, मैंने केवल js फ़ाइलों को गैर-अवरोधक बनाया है। यह ऊपर की स्क्रिप्ट के साथ है। मैं अचानक देखता हूं कि मेरी सीएसएस फाइलें लोड को रोक रही हैं। यह अजीब है, क्योंकि यह पहले उदाहरण में कुछ भी नहीं रोक रहा है। सीएसएस अचानक लोड को क्यों रोक रहा है?
सब कुछ गैर-अवरुद्ध
अंत में मैंने एक परीक्षण किया जहां सभी बाहरी फ़ाइलों को गैर-अवरुद्ध तरीके से लोड किया जाता है। अब मुझे हमारी पहली विधि के साथ कोई अंतर नहीं दिखता है। वे दोनों बस एक जैसे दिखते हैं।
निष्कर्ष
मेरा निष्कर्ष यह है कि फाइलें पहले से ही गैर-अवरुद्ध तरीके से भरी हुई हैं, मुझे विशेष स्क्रिप्ट जोड़ने की आवश्यकता नहीं है।
या मुझसे यहां कुछ छूट रहा है?
अधिक:
- लेख: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
- प्रश्न: /programming/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body
- प्रश्न: /programming/5765113/do-modern-browsers-still-limit-parallel-downloads
- कोड: http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
- कोड: http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/