मैं बड़े जेएस पुस्तकालयों को लोड करने की लागत को कैसे कम कर सकता हूं?

23

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

javascript performance

— मैका
स्रोत

25

4 चीजें हैं जो आप कर सकते हैं।

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

और कुछ अन्य लोगों ने सुझाव दिया है:

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

— बेन हॉफमैन
स्रोत

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

— फिशिंग

21

यदि आप सामान्य पुस्तकालयों (जैसे jQuery, प्रोटोटाइप या Dojo) का उपयोग कर रहे हैं, तो आप फ़ाइल को Google पर लोड कर सकते हैं और उनकी सेवा कर सकते हैं , इससे आपको कई फायदे मिलते हैं:

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

नोट: आपके द्वारा मांगे गए संस्करण का कैशिंग विशेषताओं पर बड़ा प्रभाव हो सकता है: jQuery 1.4.2 के लिए पूछना आपको एक फ़ाइल देगा जो एक वर्ष के लिए कैश की जा सकती है, लेकिन 1.4 केवल एक घंटे के लिए कैश की जा सकती है।

— Cebjyre
स्रोत

1

+ 1 CDN के लिए, और scriptsrc.net बनाने के लिए यह और भी आसान;)

— Agos

1

क्या आप अपने 'नोट' पर विस्तार कर सकते हैं? कैशिंग के समय में अंतर क्यों है?

— वेउल्केमॉर्टी

2

@theycallmemorty: जबकि मैंने डॉक्स की जाँच नहीं की है, तो मैं मान लूंगा कि यह 1.4.2 निर्दिष्ट करके आप इच्छित संस्करण के बारे में बहुत विशिष्ट हो रहे हैं, जबकि 1.4 के लिए पूछ रहे हैं कि आप मूल रूप से कह रहे हैं "मुझे सबसे अधिक दें" हाल ही के संस्करण के तहत 1.4 ", इसलिए वे इसे भारी रूप से कैशिंग नहीं कर रहे हैं।

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

यह भी ध्यान देने योग्य है कि Microsoft अपने CDN पर कुछ JS लाइब्रेरीज़ (jQuery और कुछ MS विशिष्ट) उपलब्ध कराता है जो https (जो कई अन्य स्क्रिप्ट CDN समर्थन नहीं करते हैं) asp.net/ajaxlibrary/cdn.ashx

— Bert Lamb

6

आप पूरी लाइब्रेरी को एक जेएस फाइल में डाल सकते हैं और फाइल को कंप्रेस कर सकते हैं। हालाँकि, यह वास्तव में केवल एक पृष्ठ के पहले लोडिंग के लिए मायने रखता है। इसके बाद आपकी js फ़ाइल ब्राउज़र में कैश्ड हो जाएगी, विशेष रूप से यदि आप कैशे-एक्सपायरी को काफी पहले सेट करते हैं। इसलिए कोई भी लगातार हिट आपके js फ़ाइल को अब लोड नहीं करेगा।

— txwikinger
स्रोत

+1 के लिए आप पूरी लाइब्रेरी को एक फ़ाइल में रख सकते हैं और उसे कंप्रेस कर सकते हैं। ऐसा नहीं सोचा था।

— गॉर्डन गुस्ताफसन

4

उपरोक्त उत्तरों के अलावा, आप अन्य 3 पार्टी पुस्तकालयों (jQuery, YUI, mootools, आदि) के साथ एकीकरण करते समय अपने जेएस को स्वचालित रूप से संपीड़ित और अनुकूलित करने के लिए Google क्लोजर कंपाइलर का उपयोग कर सकते हैं ।

— theycallmemorty
स्रोत

0

यदि आपके पास कई पृष्ठ तत्व हैं और अलग-अलग डोमेन तक पहुँच है, तो आप दूसरे डोमेन पर बड़े JS फ़ाइल सहित सभी स्थिर फ़ाइलों की मेजबानी करने पर विचार कर सकते हैं।

जैसा कि स्टीव सॉडर्स ने अपने उच्च प्रदर्शन वेब साइट्स ब्लॉग में नोट किया है -

... कुछ स्थितियों में, एक डोमेन पर डाउनलोड किए जा रहे संसाधनों का एक समूह लेना और उन्हें कई डोमेन में विभाजित करना सार्थक है। मैं इस डोमेन को शार्पिंग कहता हूं। ऐसा करने से अधिक संसाधनों को समानांतर में डाउनलोड करने की अनुमति मिलती है, जिससे कुल पृष्ठ लोड समय कम हो जाता है।

अन्यत्र वह लिखता है ।।

ब्राउज़रों ने प्रति डोमेन सीमित संख्या में कनेक्शन खोले हैं ... बंटवारे या पैनापन, एक डोमेन के विपरीत, दो डोमेन के अनुरोध, विशेष रूप से IE 6 और 7 में, एक तेज़ पृष्ठ में परिणाम

— mvark
स्रोत