बहुत सारे जेएस के ब्राउज़र प्रदर्शन प्रभाव में

Question

मैं काम के लिए एक वेबसाइट पर काम कर रहा हूं जो पूरी साइट के लिए एक मास्टर लेआउट का उपयोग करता है जिसमें बहुत से (40 से अधिक) जेएस फ़ाइलें शामिल हैं। यह वेबसाइट प्रस्तुत करने में वास्तव में धीमी है। ब्राउज़र के लिए पार्स करने के लिए कितना ओवरहेड है और (बेहतर तकनीकी अवधि की कमी के लिए) "इनके साथ सौदा" शामिल है? मुझे पता है कि वे कैश किए गए हैं, इसलिए उन्हें प्रत्येक पृष्ठ दृश्य पर डाउनलोड नहीं किया जा रहा है। हालांकि, क्या प्रत्येक पृष्ठ को रीफ्रेश पर पार्स किया जाता है और फिर से निष्पादित किया जाता है?

किसी भी दर पर, मुझे लगता है कि इनमें से सभी के साथ निपटने में कुछ ओवरहेड है, लेकिन मुझे यकीन नहीं है कि यह बड़ा या छोटा है या नहीं।

Answer 1

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

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

Answer 2

आप सभी .js फ़ाइलों को एक फ़ाइल में डालने का प्रयास कर सकते हैं और फिर इसे संपीड़ित करें।

इससे ब्राउज़र द्वारा किए गए अनुरोधों की मात्रा भी 39 हो जाएगी :)।

आशा है कि इससे मदद मिलेगी।

Answer 3

यह वे क्या करते हैं पर निर्भर करता है - आप इस से पहले वे सभी लोड किए गए हैं कर सकता है परीक्षण करने के लिए:

<script> 
    alert("took: " + (((new Date()).getTime()-test_start_time)/1000) + " seconds"); 
    </script> 

Answer 4

प्रभाव महत्वपूर्ण हो सकता है:

<script> 
    var test_start_time = (new Date()).getTime(); 
    </script> 

के बाद

और इस। खाते में है कि स्क्रिप्ट को डाउनलोड ब्लॉक पेज प्रतिपादन लो योग्य कुछ बातें आप कोशिश कर सकते हैं:

• के रूप में आप ताकि आप कम फ़ाइलों
• को कम करके सेक संयुक्त js फ़ाइलों को डाउनलोड कर सकते हैं के रूप में कई लिपियों कम्बाइन
• करने की कोशिश करो पेज के निचले हिस्से में जितने संदर्भ हो सकते हैं उतने संदर्भ दें ताकि वे प्रतिपादन को अवरुद्ध न करें (यह आसान नहीं है और सावधानी से किया जाना चाहिए, आवश्यक जावास्क्रिप्ट डाउनलोड होने से पहले आप कुछ नियंत्रणों के साथ बातचीत की अनुमति दे सकते हैं)।
• जेएस फ़ाइलों के लिए पैरालेल डाउनलोड लागू करें (डिफ़ॉल्ट रूप से वे अनुक्रमिक रूप से डाउनलोड होते हैं)। Here आपके पास

Answer 5

निश्चित रूप से तुलना और विपरीत - के बारे में कुछ उदाहरण हैं - यह सबसे विश्वसनीय न्यायाधीश होगा।

फिर भी, मैं मुख्य अनुभाग में केवल एक या दो जेएस फ़ाइलों को लोड करने के लिए अपना सर्वश्रेष्ठ प्रयास करता हूं, फिर मैं कुछ तत्वों के परीक्षण के लिए jquery का उपयोग करता हूं जिन्हें DOM लोड होने के बाद अतिरिक्त स्क्रिप्ट या सीएसएस की आवश्यकता हो सकती है। उदाहरण के लिए, मैं पूर्व टैग stylize करने स्रोत उजागर js पुस्तकालय का उपयोग करें:

if($('pre').length > 0) { 
    $.getScript(svx_cdns+'pkgs/shjs-0.6/sh_main.min.js', function() { 
    $('<link>', { 
     'rel': 'stylesheet', 
     'type': 'text/css', 
     'href': svx_cdns+'pkgs/shjs-0.6/css/sh_vim.min.css' 
    }).appendTo('head'); 
    sh_highlightDocument('/s/pkgs/shjs-0.6/lang/', '.min.js'); 
    }); 
} 

इस तरह पृष्ठ लोड बहुत जल्दी, और फिर "समायोजित कर देता है" बाद में।

Answer 6

भले ही फ़ाइलों को कैश किया गया हो, फिर भी यह जांचने का अनुरोध है कि फ़ाइल संशोधित की गई है या नहीं।आप अपनी कैशिंग रणनीति बदल सकते हैं और अपनी फाइलों को कभी समाप्त नहीं कर सकते हैं। इस तरह ब्राउज़र यह भी नहीं पूछेगा कि इसे संशोधित किया गया है या नहीं। इसका मतलब यह होगा कि आपको अपने सभी यूआरएल में कैश बस्टर जोड़ना होगा। सुनिश्चित करने के लिए फायरबग के नेट टैब को देखें। मुझे अपने सभी सीएसएस/जेएस/आईएमजीएस के साथ 304 संशोधित नहीं किया गया है।

फ़ाइलों को हर बार पार्स किया जाना है, लेकिन शायद यह बाधा नहीं है।

अपने सभी जेएस को एक फ़ाइल में कॉपी करने का प्रयास करें। हमारी स्क्रीन में से एक 100 से अधिक जेएस फाइलों सहित था। हमने एक एकीकृत न्यूनतम फ़ाइल बनाई और हमारा स्क्रीन लोड समय 10 सेकंड से कम हो गया। 3.