हर पेज पर मुख्य जावास्क्रिप्ट लोड हो रहा है? या इसे प्रासंगिक पृष्ठों तक तोड़ना?

Question

मेरे पास एक 700kbविघटित JS फाइल है जो हर पेज पर लोड है। इससे पहले कि मैं 12प्रत्येक पृष्ठ पर जावास्क्रिप्ट फ़ाइलों को था, लेकिन http अनुरोधों को कम करने के लिए मैंने उन सभी को संकुचित कर दिया 1 file।

यह फ़ाइल है ~130kb gzippedऔर परोसी जाती है gzip। हालाँकि स्थानीय कंप्यूटर पर यह अभी भी अनपैक्ड है और हर पेज पर लोड है। क्या यह प्रदर्शन का मुद्दा है?

मैंने जावास्क्रिप्ट को फायरबग प्रोफाइलर के साथ प्रोफाइल किया है, लेकिन कोई समस्या नहीं देखी। मैं जिस समस्या / भ्रम का सामना कर रहा हूं, उस फ़ाइल में संकुचित किए गए jquery पुस्तकालय हैं जो कभी-कभी वर्तमान पृष्ठ पर उपयोग नहीं किए जाते हैं।

उदाहरण के लिए jquery datatables200kb संपीड़ित है और यह केवल मेरी वेबसाइट के 2 पेजों पर लोड है। एक और है jqplotऔर एक और है 200kb।

अब मेरे पास 400kbअतिरिक्त कोड है जो 80%पृष्ठों पर निष्पादित नहीं होता है ।

क्या मुझे 1 फ़ाइल में सब कुछ छोड़ देना चाहिए?

क्या मुझे jquery पुस्तकालयों को बाहर निकालना चाहिए और वर्तमान पृष्ठ पर केवल प्रासंगिक JS लोड करना चाहिए?

Comments

यदि JS कोड के 700kb हैं तो आपको वास्तव में इसे फिर से विभाजित करना चाहिए और केवल उन लिपियों को शामिल करना चाहिए जिनकी आपको वास्तव में आवश्यकता है। इसके अलावा, jQuery का उपयोग करते हुए ("... कम लिखें, अधिक करें ...") ऐसा लगता है कि इस तरह की विशाल जेएस फाइल के लिए थोड़ा सा ओवरसाइज़ किया गया है। जेएस के इतने बड़े पैमाने पर आप क्या कर रहे हैं?

— परेला

@feeela jquery-ui, jquery.datatables पर एक नज़र डालें। वे अकेले 400kb एक साथ हैं। मुझे अन्य प्लगइन्स मिले हैं जिनका मैं बहुत अधिक उपयोग करता हूं जैसे कि jquery.validate, jquery.uniform - यह सामान जोड़ता है। xD

— काइल

उस मामले में - जैसा कि नीचे कहा गया है - आपको वास्तव में स्क्रिप्ट को विभाजित करना चाहिए और केवल उसी चीज़ को लोड करना चाहिए जो आवश्यक है ...

— फीतेला

Answer 1

आप केवल उन पृष्ठों पर आवश्यक पुस्तकालयों को गतिशील रूप से लोड करने के लिए रिक्जेस्ट का उपयोग कर सकते हैं । फिर आपको केवल 385kb की बचत करते हुए सभी पेजों पर रिक्जेक्शंस (जो लगभग 14k है) लोड करना है।

एकीकरण भी बहुत आसान है: बस "लपेटें" कोड में आपके पास आवश्यक सामान शामिल हैं:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

Comments

मुझे वास्तव में वह वेबसाइट डिज़ाइन पसंद है। मैंने आवश्यकता के बारे में कभी नहीं सुना है। आप इसे http अनुरोधों पर कैसे रेट करते हैं? क्या यह पृष्ठ पर अधिक http अनुरोध नहीं करता है? (यह बुरा नहीं है?) मेरे मूर्खतापूर्ण सवालों के लिए क्षमा करें।

— काइल

कम अनुरोधों का होना बेहतर है, लेकिन बचत> 350k भी खराब नहीं है। यदि आप उस पृष्ठ पर किसी अन्य पुस्तकालय को शामिल करते हैं , तो हाँ, आपकी साइट एक और अनुरोध करेगी । यदि यह datatablesएक साइट jqplotपर और दूसरे पर है, तो यह ठीक है। 50% पेजों पर पांच और लाइक्स लोड करने से फायदा गायब हो जाएगा, मैं सहमत हूं। लेकिन आपके मामले में, मैं इसे एक बहुत अच्छा समाधान मानता हूं (यह मानते हुए, कि आपके बाकी जेएस एक gzipped फ़ाइल है)।

— माइकल

धन्यवाद माइकल। यह समाधान बल्कि शानदार है। इससे पहले कि मैं एक पृष्ठ पर सब कुछ विभाजित करने जा रहा था, लेकिन यह ... इससे बेहतर है कि मेरे मन में क्या था। इस सुझाव के लिए धन्यवाद। जब से आप आवश्यकताएं से परिचित हैं, क्या आपको लगता है कि आवश्यकताएं पर्याप्त होंगी? मैं, कुछ वेबसाइटों है कि वे अपने jQuery और अन्य पुस्तकालयों लोड करने के लिए गूगल का उपयोग पर देखते हैं google.load('...')।

— काइल

मैं Google (या इसे ऑफ़र करने वाली अन्य साइटों) से सामान्य पुस्तकालयों को लोड करने की दृढ़ता से सलाह देता हूं। इसके 2 फायदे हैं: क) विभिन्न साइटों के बीच लिबास फ़ाइल कैश की गई है। संभावना है कि उपयोगकर्ता ने पहले किसी साइट का दौरा किया था, जो Google से लोड किए गए jquery का भी उपयोग करता है। यह फ़ाइल फिर से सर्वर से नहीं, कैश से लोड की जाती है! ख) यहां तक कि अगर यह है लोड करने के लिए, यह, गूगल CDN से लोड करने के लिए अपने स्वयं के वेबसर्वर से की तुलना में बहुत तेजी से किया जाएगा।

— माइकल

Answer 2

यदि आपकी रूपरेखा / सीएमएस / जो भी उपयुक्त कार्य हैं, आप स्क्रिप्टिंग को सशर्त रूप से @Michael के सुझाव के रूप में शामिल कर सकते हैं, लेकिन अतिरिक्त पुस्तकालय के बिना।

उदाहरण के लिए, अपना डेटाटैब केस लेते हुए, वर्डप्रेस कुछ इस तरह से स्थिति को संभाल सकता है:

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

आवश्यकताएँ के साथ कुछ भी गलत नहीं है; आपको बस यह मूल्यांकन करने की आवश्यकता है कि क्या यह अतिरिक्त स्तर की जटिलता को जोड़ता है (साथ ही इसे पहली जगह में उपयोग करने के लिए सीखना) ऑफसेट जो आपके लिए अधिक आसानी से उपलब्ध उपकरण कर सकते हैं। यदि आपके पास केवल ऊपर बताए गए दो मामले हैं, तो यह एक बेहतर विकल्प हो सकता है। यदि आप बहुत अधिक आगे बढ़ रहे हैं, तो आवश्यकता हैJJS पूरे पर एक बेहतर दृष्टिकोण हो सकता है।

Comments

मेरे पास एक कस्टम वेबसाइट है जिसे मैंने एक html टेम्पलेट से बनाया है जिसे मैंने थीमफॉरेस्ट से खरीदा है। एकमात्र समस्या यह है कि दोस्त के पास 6 जेएस फाइलें बिखरी हुई थीं और यह गड़बड़ था। इसलिए मैंने उन लोगों को एक फाइल में डाल दिया और जिसमें कुछ लाइब्रेरी jqplot, datatables, jquery-ui शामिल हैं। वे सभी लगभग 550-600kb तक जोड़ते हैं। 100kb उन पुस्तकालयों का उपयोग करके मेरा JS है। मुझे ऐसा लगता है कि मुझे हर पेज पर इतनी अप्रासंगिक जेएस के कार्यों को लोड करने के बजाय इसे ठीक करना चाहिए। आपका सुझाव देने के लिए धन्यवाद! =)

— काइल

Answer 3

जावास्क्रिप्ट के 700kb एक प्रदर्शन मुद्दा है, क्योंकि यह पृष्ठ लोड के बाद पार्स किया जाना चाहिए। इसके कारण, आपको ध्यान रखना चाहिए, कि केवल उन लिपियों, जिनकी आवश्यकता है, लोड की गई हैं। पूर्ण AJAX साइटों पर एक बड़ा जावास्क्रिप्ट ठीक हो सकता है, जैसे कि GMail, जब नेविगेशन को एकल पृष्ठ को छोड़े बिना आंतरिक रूप से नियंत्रित किया जाता है। हालांकि, यहां तक ​​कि पूर्ण AJAX साइटें शुरुआत में अनावश्यक JS को लोड करने से रोकने के लिए डायनेमिक JS लोडिंग करती हैं (मेमोरी और स्पीड isssues दोनों)।

आपने कहा है कि आप http ट्रैफ़िक को कम करना चाहते हैं। आपको HTTP कैशिंग के साथ खेलना चाहिए । मुद्दा यह है कि जब तक आप समय समाप्त नहीं करते हैं, तब तक JS में परिवर्तन दिखाई नहीं दे सकते हैं, यदि कैश की समय सीमा समाप्त हो जाती है।

हालाँकि, एक चाल है, जिसे आप संदर्भित नहीं करते हैं myscript.js, लेकिन myscript.js?version={myversion}। एप्लिकेशन अपडेट के बाद आप बदल जाते हैं {myversion}और आप जावास्क्रिप्ट को फिर से लोड करते हैं।

Comments

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

— ज़ाफ - बेन डुगुइद

Answer 4

~ 700kb का जावास्क्रिप्ट एक प्रदर्शन मुद्दा है और यदि संपीड़ित है और हमें कोड को अनुकूलित करने के लिए काम करते समय नियमों का पालन करना होगा:

1. Javascripts को कम करें - बस आप कंप्रेस और डिकम्प्रेसिंग कर रहे हैं, जो कोड को कम नहीं करता है, सबसे पहले अच्छे Min JS JS टूल का उपयोग करें और अपने कोड को Minify करें। आप 12 फाइलें हैं और प्रत्येक फ़ाइल सर्वश्रेष्ठ प्रदर्शन के लिए क्लब करने से पहले sepratly न्यूनतम होगी।

2. अतुल्यकालिक लोडिंग परिणाम का उपयोग करके और पृष्ठ के प्रतिपादन में अतुल्यकालिक जावास्क्रिप्ट लोडिंग का उपयोग करें । उपयोगकर्ता प्रभाव बहुत मजबूत है क्योंकि अच्छा अतुल्यकालिक लोडिंग रेंडरिंग प्रक्रिया को अवरुद्ध नहीं करेगा और महसूस किया गया पेज लोड समय बहुत कम हो जाता है। छवियाँ और अन्य प्रदर्शित वस्तुओं को विनियमित किया जाएगा क्योंकि कोई जावास्क्रिप्ट लोड नहीं है।

3. JQUERY के लिए GOOGLE सीडीएन का उपयोग करें ; मुझे लगता है कि आप JQUERY का उपयोग कर रहे हैं और इसे अपनी स्वयं की वेबसाइट से लोड कर रहे हैं, जो कि एक अतिरिक्त डिस्क-लाभ भी है, कृपया JQUERY को लोड करने के लिए GOOGLE CDN ​​(निःशुल्क) का उपयोग करें। जैसा कि यह लगभग हर तीसरी वेबसाइट द्वारा उपयोग किया जा रहा है और इस प्रकार पहले से ही कैश में क्लाइंट कंप्यूटर पर उपलब्ध है।

4. कस्टम लॉन्ग एक्सपायर्स हेडर्स : कुछ वेबसाइट लोडिंग टाइम के इश्यू से भरी हुई हैं, तो आपको HTTP जेएस फाइल्स के लिए लॉन्ग एक्सपायर्स देने होंगे, ताकि वे हर बार डाउनलोड न हो सकें, जिससे दूसरी बार रिक्वेस्ट कम हो जाएगी। मेरे शोध के अनुसार, प्रथम पृष्ठ की यात्रा की तुलना में दूसरे पृष्ठ पर लोड किए गए समय में अधिक निकास है।

5. पृष्ठ गति के साथ जांचें : कुछ बार अन्य संसाधन भी पृष्ठ की लोडिंग गति को प्रभावित करते हैं, कृपया चेक को पार करें और अन्य संसाधनों को भी अनुकूलित करने का प्रयास करें। हर संसाधन पर थोड़ा सा कदम रखने से हमारे जेएस लोडिंग को अतिरिक्त समय मिलता है।