सामने अंत प्रदर्शन। भाग 1 - संघनन, संपीड़न, कैशिंग (मोज़िला द्वारा Node.js पर 12 लेखों में से 4)

एक अनुवादक से: यह मोज़िला आइडेंटिटी टीम से Node.js श्रृंखला का चौथा लेख है, जो पर्सोना प्रोजेक्ट में शामिल है। यह आलेख साइट संसाधनों की लोडिंग गति और इस उद्देश्य के लिए मोज़िला में बनाए गए कनेक्ट-कैचिफ़ मॉड्यूल को कैसे बढ़ाया जाए, इसके बारे में है।

---

इस लेख में, हम फ्रंट-एंड परफॉर्मेंस के बारे में बात करेंगे और मोज़िला द्वारा बनाए गए टूल को पेश करेंगे ताकि पर्सन वेबसाइट को जल्द से जल्द बनाया जा सके। हम कनेक्ट-कैचीफाई के साथ काम करने का वर्णन करेंगे, एक मॉड्यूल जो कुछ सबसे महत्वपूर्ण पहलुओं को स्वचालित करता है जो फ्रंट-एंड प्रदर्शन सुनिश्चित करते हैं।

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

तीन 'के' ग्राहक प्रदर्शन

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

कड़ी

संघटन का उद्देश्य सर्वर अनुरोधों की संख्या को कम करना है। पूछताछ महंगी है। HTTP कनेक्शन खोलने का समय अक्सर डेटा ट्रांसफर करने के समय से अधिक होता है। हर अतिरिक्त अनुरोध साइट को धीमा कर देता है, खासकर मोबाइल उपकरणों पर, जहां नेटवर्क विलंबता बहुत बड़ी हो सकती है। क्या आपने कभी EDGE के माध्यम से अपने मोबाइल से कुछ ऑनलाइन स्टोर पर जाना है और कई छवियों के क्रमिक डाउनलोड के लिए दर्द से इंतजार कर रहे हैं?

नया SPDY प्रोटोकॉल, जो पहले से ही HTTP 2.0 प्रोटोकॉल के नए संस्करण के लिए विनिर्देशन का आधार बन चुका है, कई संसाधनों के लिए अनुरोधों को एक HTTP कनेक्शन में जोड़ सकता है। दुर्भाग्य से, अब तक इसका समर्थन केवल क्रोम, फ़ायरफ़ॉक्स और ओपेरा के नवीनतम संस्करणों में है।

मैन्युअल मोड में एक में कई संसाधनों को मिलाकर, पहले की तरह, कहीं भी काम करता है और SPDY के व्यापक वितरण के बाद काम करेगा। बुनियादी प्रकार के संसाधनों के संयोजन के लिए कई उपकरण हैं - JavaScrit, CSS और छवियां।

जावास्क्रिप्ट और सीएसएस

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

<script src="jquery.min.js"></script> <script src="main.js"></script> <script src="image-carousel.js"></script> <script src="widget.js"></script> 

एक में कई अनुरोधों को जोड़कर, आप लोड समय को काफी कम कर सकते हैं:

  <script src="main.production.js"></script> 

कोड लिखते समय और डिबगिंग करते समय संयुक्त फाइल के साथ काम करना बहुत असुविधाजनक होता है, इसलिए आमतौर पर समापन केवल तैयार साइट के लिए किया जाता है। CSS फाइलों को उसी तरह विलय कर दिया जाता है जैसे कि जावास्क्रिप्ट।

छवि

छवियों को लोड करने पर URL और स्प्रिट में डेटा लोड करते समय अनुरोधों की संख्या को कम करने के लिए दो मुख्य तकनीकें।

डेटा: URI

डेटा: यूआरआई यूआरएल का एक विशेष रूप है जो आपको छोटी छवियों को यूआरएल के रूप में सीधे HTML या सीएसएस दस्तावेज़ के पाठ में एम्बेड करने की अनुमति देता है। डेटा URI का उपयोग img, टैग की src विशेषता और CSS में पृष्ठभूमि छवि के url दोनों में किया जा सकता है। चूंकि अंतर्निहित छवियां बेस 64 में एन्कोडेड हैं, इसलिए वे अधिक स्थान लेते हैं, लेकिन नियमित छवियों की तुलना में कम अनुरोध की आवश्यकता होती है। यदि तस्वीर काफी छोटी है, तो अनुरोधों की संख्या में कमी के कारण लाभ आकार में नुकसान से अधिक है। IE6 और IE7 डेटा का समर्थन नहीं करते हैं: URI, इसे ध्यान में रखें।

स्प्राइट

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

व्यक्तिगत छवियों के एक सेट से स्प्राइट बनाने के लिए कई उपकरण हैं। उनमें से एक स्प्राइट काउ वेबसाइट है, जो लोड की गई छवि के आधार पर स्प्राइट के लिए सीएसएस कोड उत्पन्न करता है।

अतिरिक्त बाइट्स को हटा दें - न्यूनतमकरण, अनुकूलन और संपीड़न

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

जावास्क्रिप्ट और सीएसएस

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

लोकप्रिय जावास्क्रिप्ट लघुकरण उपकरण में UglifyJS , YUICompressor और Google Colsure Compiler शामिल हैं । CSS के लिए, YUICompressor और UglifyCSS का उपयोग अक्सर किया जाता है।

छवि

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

याहू! ऑनलाइन टूल Smush.it प्रदान करता है। ImageOptim OSX के लिए एक समान ऑफ़लाइन कार्यक्रम है। यह पूरी तरह से स्वचालित मोड में काम कर सकता है - बस उस पर आवश्यक फ़ाइलों को खींचें और छोड़ें, और वे ध्यान से अपना वजन कम कर सकते हैं।

यदि दृश्य गुणवत्ता में थोड़ी गिरावट स्वीकार्य है, तो आप अतिरिक्त संपीड़न अनुपात के साथ चित्र को संपीड़ित कर सकते हैं।

सर्वर भी मदद कर सकता है

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

कैशिंग

सामंजस्य और संपीड़न उन लोगों की मदद करते हैं जो पहले हमारी साइट पर गए थे। तीसरा "के" - कैशिंग, नियमित आगंतुकों की मदद करता है। एक उपयोगकर्ता जो पहले से ही साइट पर है, उसे सभी संसाधनों को पुनः लोड नहीं करना चाहिए। HTTP इसे प्राप्त करने के लिए दो तंत्र प्रदान करता है - कैश्ड हेडर और ETags, या इकाई टैग।

स्थैतिक संसाधनों से संबंधित HTTP हेडर के दो प्रकार हैं जो कभी नहीं या लगभग कभी नहीं बदलते हैं। ये दो HTTP प्रतिक्रिया हेडर फ़ील्ड हैं - Expires और Cache-Control: max-age । Expires क्षेत्र उस तारीख को संग्रहीत करता है जिसके बाद संसाधन को अद्यतन करने की आवश्यकता होगी। max-age - सेकंड में संसाधन जीवनकाल। यदि शीर्ष लेख में ये फ़ील्ड सेट हैं, तो ब्राउज़र एक निर्दिष्ट समय के बाद ही मौजूदा संसाधन का अनुरोध करेगा।

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

मजबूर कैशे समाशोधन

एटाॅग पर एक्सपायर्स और max-age क्षेत्रों का उपयोग करने का लाभ यह है कि ब्राउज़र केवल संसाधनों का अनुरोध करता है यदि वे समाप्त हो जाते हैं। यह भी मुख्य दोष है। यदि संसाधन अचानक बदल जाए तो क्या होगा? कभी-कभी कैश को साफ करने के लिए मजबूर करना आवश्यक है।

यह आमतौर पर URL में संसाधन की संस्करण संख्या को जोड़कर किया जाता है। URL में कोई भी परिवर्तन संसाधन के नए संस्करण को डाउनलोड करने का कारण बनता है।

उदाहरण के लिए, यदि जीवनकाल example.com/logo.png example.com/logo.png एक वर्ष का है, लेकिन लोगो बदल रहा है, हर कोई जो पहले से पुराने संस्करण को डाउनलोड कर चुका है, एक साल बाद ही नया देखेगा। आप URL में कुछ संस्करण पहचानकर्ता जोड़कर इससे निपट सकते हैं:

 http://example.com/v8125/logo.png 

या

 http://example.com/logo.png?v8125 

जब लोगो बदलता है, तो URL भी बदल जाएगा, जिसका अर्थ है कि सभी उपयोगकर्ता नया संस्करण डाउनलोड करेंगे।

कनेक्ट-कैचीफाई: कॉन्टेक्ट्स और कैशिंग संसाधनों के लिए Node.js लाइब्रेरी

कनेक्ट-कैचिफ़ , Node.js के लिए एक मिडलवेयर है जिसे मोज़िला द्वारा संसाधनों के एकत्रीकरण और कैशिंग की सुविधा के लिए विकसित किया गया है।

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

Connect-cachify को कॉल से setup() फ़ंक्शन के माध्यम से कॉन्फ़िगर किया गया है। यह दो तर्क, assets और options लेता है। assets एक शब्दकोश है जो उत्पादन और विकास मोड में संसाधनों के बीच एक पत्राचार स्थापित करता है। प्रत्येक संयुक्त और छोटा संसाधन विकास मोड के लिए कई अलग से मेल खाता है।

options - वैकल्पिक पैरामीटर, जिनमें से:

• prefix - एक पंक्ति जो लिंक में हैश को पुनर्निर्देशित करती है (डिफ़ॉल्ट रूप से - खाली);
• production - एक झंडा जो उत्पादन और विकास मोड के बीच स्विच करता है (डिफ़ॉल्ट रूप से true );
• root - निर्देशिका का पूर्ण पथ स्थिर संसाधनों के साथ (डिफ़ॉल्ट रूप से - '.' )।

कनेक्ट-कैचीफाई उदाहरण

मान लें कि हमारे पास सरल HTML है जो तीन सीएसएस फ़ाइलों और तीन अलग-अलग लिपियों का संदर्भ देता है:

 ... <head> <title>Dashboard: Hamsters of North America</title> <link rel="stylesheet" type="text/css" href="/css/reset.css" /> <link rel="stylesheet" type="text/css" href="/css/common.css" /> <link rel="stylesheet" type="text/css" href="/css/dashboard.css" /> </head> <body> ... <script type="text/javascript" src="/js/lib/jquery.js"></script> <script type="text/javascript" src="/js/magick.js"></script> <script type="text/javascript" src="/js/laughter.js"></script> </body> ... 

हम अपने सर्वर से कनेक्ट-कैचीफाई कनेक्ट करते हैं, उत्पादन और विकास संसाधनों के बीच पत्राचार सेट करते हैं, और मॉड्यूल को कॉन्फ़िगर करते हैं:

 // Include connect-cachify const cachify = require('connect-cachify'); // Create a map of production to development resources var assets = { "/js/main.min.js": [ '/js/lib/jquery.js', '/js/magick.js', '/js/laughter.js' ], "/css/dashboard.min.css": [ '/css/reset.css', '/css/common.css', '/css/dashboard.css' ] }; // Hook up the connect-cachify middleware app.use(cachify.setup(assets, { root: __dirname, production: your_config['use_minified_assets'], })); ... 

डीआरवाई सिद्धांत का उल्लंघन नहीं करने के लिए, संसाधन पत्राचार मानचित्र को कनेक्ट-कैचीफाई और निर्माण स्क्रिप्ट में उपयोग की जाने वाली एक अलग फाइल में संग्रहीत किया जा सकता है।

फिर हम अपने टेम्प्लेट को अपडेट करते हैं, यह दर्शाता है कि सीएसएस और जावास्क्रिप्ट को कहां शामिल किया गया है। CSS cachify_css हेल्पर, जावास्क्रिप्ट, क्रमशः, cachify_js का उपयोग करके जुड़ा हुआ है।

 ... <head> <title>Dashboard: Hamsters of North America</title> <%- cachify_css('/css/dashboard.min.css') %> </head> <body> ... <%- cachify_js('/js/main.min.js') %> </body> ... 

कनेक्ट- cachify आउटपुट

यदि उत्पादन ध्वज false सेट किया गया false , तो कनेक्ट-कैचिफ़ तीन सीएसएस लिंक और तीन जेएस लिंक उत्पन्न करेगा, ठीक उसी तरह जैसा कि ऊपर के HTML में है। लेकिन अगर यह true , तो केवल एक टैग बनाया जाएगा। प्रत्येक टैग के URL में संसाधन का MD5 हैश शामिल होगा। यह संसाधन परिवर्तन के मामले में अद्यतन को बाध्य करने के लिए किया जाता है। वह सब है।

 ... <head> <title>Dashboard: Hamsters of North America</title> <link rel="stylesheet" type="text/css" href="/v/2abdd020a6/css/dashboard.min.css" /> </head> <body> ... <script type="text/javascript" src="/v/acdd2ab372/js/main.min.js"></script> </body> ... 

निष्कर्ष

अपनी साइट को गति देने के लिए आप बहुत सी चीजें कर सकते हैं जो बहुत सरल हैं। यहां तक ​​कि सबसे बुनियादी चीजें, हमारे तीन के - संघनन, संपीड़न, और कैशिंग - पेज लोड समय को काफी कम कर सकते हैं और उपयोगकर्ता अनुभव में सुधार कर सकते हैं। कनेक्ट-कैचिफ़, एप्लिकेशन कॉन्सेप्टेशन और कैशिंग को स्वचालित करने में मदद करता है, लेकिन आगे कई अन्य सुधार हैं। फ्रंटएंड एक्सेलेरेशन के बारे में अगले लेख में, हम आपको दिखाएंगे कि ETag का उपयोग करके गतिशील सामग्री को कैश कैसे करें।

---