पृष्ठ पार्सिंग को अवरुद्ध किए बिना जावास्क्रिप्ट और सीएसएस के समानांतर लोडिंग

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

तुरंत मैं यह स्वीकार करने का प्रस्ताव करता हूं कि सभी जेएस फाइलें कम से कम और संपीड़ित रूप में प्रेषित होती हैं।

कई समाधान हैं, जैसे:
- सीधे पेज में शैलियों और लिपियों को रखें;
- स्क्रिप्ट टैग के लिए एसिंक्स / डेफ़र विशेषताओं की स्थापना;
- सभी स्क्रिप्ट को एक फ़ाइल में गोंद करें;
- शरीर के अंत में स्क्रिप्ट लिंक रखें;
- सीडीएन / अलग-अलग मेजबानों पर सभी फाइलें रखें;
- आपका विकल्प ...

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

यह सब निश्चित रूप से शुरू हुआ, इस तथ्य के साथ कि मैंने एक परियोजना को लिया, और कुछ बिंदु पर मुझे ऐसा लगा कि एक साधारण पृष्ठ लंबे समय तक लोड होता है, और लोडिंग शेड्यूल को देखा, और वाईस्लो के परिणामों पर। मेरी आँखों में एक सेकंड के लिए आग लग गई, लेकिन यह जानना बेहतर हो सकता है कि मैं देखने के लिए चढ़ गया,

आइए उपरोक्त तरीकों की कमियों का विश्लेषण करें।

सीधे पेज पर स्क्रिप्ट और स्टाइल रखें

जाहिर है, यह समाधान केवल छोटे पृष्ठों के लिए उपयुक्त है, जहां कई स्टाइल स्क्रिप्ट नहीं हैं, क्योंकि पेज पुनः लोड होने की स्थिति में, स्थैतिक डेटा फिर से लोड किया जाएगा, और कैशिंग काम नहीं कर सकता है। समाधान छोटे लिपियों और शैलियों के लिए उचित है जो पृष्ठ लोड होने के बहुत ही महत्वपूर्ण हैं।

स्क्रिप्ट टैग के लिए async / defer विशेषताएँ सेट करना

विनिर्देश यहाँ है ।
स्क्रिप्ट टैग की async और defer विशेषताएँ निम्नलिखित ब्राउज़रों द्वारा समर्थित हैं , जो उन साइटों के लिए अपर्याप्त लग सकती हैं जो पुराने ब्राउज़र वाले लोगों तक पहुँच सकते हैं, साथ ही ओपेरा, जो विशेष रूप से RuNet में महत्वपूर्ण है।
कमियों के बीच, यह भी ध्यान दिया जा सकता है कि डीफ़र विशेषता के साथ टैग से भरी गई लिपियाँ दस्तावेज़ का उपयोग नहीं कर सकती हैं, क्योंकि उनका निष्पादन पृष्ठ पार्सर के साथ सिंक्रनाइज़ नहीं किया गया है।

बॉन्डिंग स्क्रिप्ट और स्टाइल

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

शरीर के अंत में सिर और स्क्रिप्ट पर स्टाइलशीट डालना

यह उल्लेख करने और उपयोग करने के लायक है, लेकिन इस मामले में, जैसा कि ऊपर वर्णित है, जब तक कि क्षण तक दस्तावेज़। पहले से ही स्क्रिप्ट के बीच अनसुलझे निर्भरता हो सकती है, और अगर प्लगइन्स के साथ jQuery के लिए यह मान्य है, तो विकल्प के लिए जब हम Facebook API लाइब्रेरी लोड करते हैं या VKontakte, और हम अपनी स्क्रिप्ट को तुरंत चलाना चाहते हैं, जो यह निर्धारित करने के लिए एक एपीआई अनुरोध भेजेगा कि क्या उपयोगकर्ता लॉग इन है, यह बैसाखी के साथ वादा करता है, या पृष्ठ के शीर्ष पर एपीआई लाइब्रेरी को लोड करके, इसके प्रदर्शन को अवरुद्ध करता है, जो DNS रिज़ॉल्यूशन को कॉल करने की आवश्यकता से बढ़ जाता है।

सीडीएन से डाउनलोड करें

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

और क्या उपाय हैं?

क्या होगा यदि मैं पृष्ठ लोड करते समय स्क्रिप्ट डाउनलोड करने का प्रयास करता हूं, लेकिन उन्हें निष्पादित नहीं करता हूं, और आमतौर पर ब्राउज़र से छिपाता हूं कि ये स्क्रिप्ट हैं जब तक कि वे लोड नहीं किए जाते हैं ताकि पृष्ठ के प्रारंभिक प्रदर्शन को अवरुद्ध न करें?

नोटों में कहीं न कहीं मुझे हेडजेएस मिला, लेकिन पहली बार जब से मैं इस पर ठोकर खाई, यह गंभीरता से परिपक्व हो गया है, और न केवल हमें जो चाहिए, बल्कि बहुत कुछ करना सीखा है। इस तथ्य के बावजूद कि पुस्तकालय स्पष्ट रूप से अच्छा है, और केवल 3KB को एक संक्षिप्त रूप में लेता है, मैंने विकल्पों की तलाश करने का फैसला किया और 14 समान पुस्तकालयों के रूप में पाया, एक संक्षिप्त और हमेशा सही तुलना नहीं की जा सकती है, जो इस लेख में पाया जा सकता है, प्लस लोड .js और शामिल । Js । प्रस्तुत पुस्तकालयों के माध्यम से एक त्वरित नज़र और पहले बड़े लोगों (> 3KB) को नोटिस किया, और फिर जो मुझे वाक्य रचना या ऑपरेशन के सिद्धांत के कारण पसंद नहीं आया, मैंने व्यक्तिगत रूप से YepNope.js को चुना, जो कि मॉडर्न का हिस्सा है। पुस्तकालय के लेखक रिपोर्ट करते हैं कि पुस्तकालय दूसरों की तुलना में न तो बेहतर है और न ही बदतर है, और दूसरों के समान ही कार्य करता है, और वे स्वयं भी विभिन्न परियोजनाओं में अन्य लोडरों का उपयोग करते हैं।

तो, संसाधन लोडर YepNope उदाहरण के साथ क्या और कैसे करता है:

<script src='/javascripts/yepnope-min.js'> yepnope('/javascripts/jquery.min.js', '/javascripts/jquery.loadmask.min.js', '/javascripts/jquery.jgrowl_minimized.js']) </script> 

निर्दिष्ट क्रम में भरी हुई लिपियों का निष्पादन।

आरंभीकरण ब्लॉक में आगे:

 yepnope({ load: ['//connect.facebook.net/ru_RU/all.js', '/javascripts/facebook_auth_callback.js'], complete: function(){ FB.init({appId: '273684999999999', xfbml: true, cookie: true, oauth: true}) FB.Event.subscribe('auth.statusChange', facebook_auth) } }) 

तो, हम सभी वांछित बन्स प्राप्त करते हैं, जैसे समानांतर लोडिंग, कुछ स्क्रिप्ट रनटाइम, निर्भरता, तैयार कॉलबैक।

लोडिंग शैलियों का एक उदाहरण:

 yepnope(['/stylesheets/jquery.loadmask.css', '/stylesheets/jquery.jgrowl.css']) 

YepNope और अन्य बूटलोडर्स में भी कई अतिरिक्त विशेषताएं हैं, जिनमें से इस विषय में वर्णन उपयुक्त नहीं है, लेकिन जो मिलना अच्छा लगता है, और हर किसी को अपने लिए कुछ चुनना चाहिए।

स्क्रिप्ट लेखक ऑपरेशन और एपीआई के एकीकृत सिद्धांत पर नहीं आ सकते हैं, और हमेशा नए डाउनलोडर बनाते रहेंगे। इस संबंध में, हेडजेएस का लेखक बूट ऑर्डर के विनिर्देशों में समर्थन को एकीकृत करने की पेशकश करता है, और $ script.js का लेखक इसमें इसका समर्थन करता है, लेकिन अभी तक यह विनिर्देशों के माध्यम से जाएगा और सभी ब्राउज़रों में समान काम करेगा, हमें बूटलोडर्स का उपयोग करना होगा।

अंतिम नुस्खा क्या है?
- पेज के सिर में एक स्क्रिप्ट एम्बेड करें जो लोडर को इंगित करता है;
- एक इनलाइन स्क्रिप्ट एम्बेड करें जो अन्य लिपियों और शैलियों को लोड करने के लिए लोडर का उपयोग करता है;
- उन लिपियों और शैलियों को मिलाएं जो केवल एक साथ एक साथ HTTP अनुरोधों की संख्या को कम करने के लिए उपयोग की जाती हैं;
- लिपियों और शैलियों को कम करें;
- सुनिश्चित करें कि सर्वर gzip के साथ संचारित डेटा को पैक कर रहा है;
- सुनिश्चित करें कि सर्वर सही ढंग से कैश करता है;
- सावधानीपूर्वक और सोच-समझकर थर्ड-पार्टी सीडीएन और अतिरिक्त मेजबानों का उपयोग करें।

विषय लिखते समय, मैंने निम्नलिखित सामग्रियों पर नज़र रखी, पढ़ने की सिफारिश की:
[1]। जावास्क्रिप्ट घटना अनुक्रमण
[2]। Yepnope.js के साथ सरल स्क्रिप्ट लोड हो रहा है
[3]। Yepnope.js का विवरण
[4]। $ Script.js का विवरण

युपीडी।
SHINE से एक और तालिका एक पूरी पूरी सूची के साथ विभिन्न बूटलोडर्स की तुलना करती है।
येप्नोप के वर्णन का S2nek रूसी अनुवाद।