🦔 💃🏿 ♀️ वेब एप्लिकेशन प्रदर्शन क्या है? ▫️ 👨‍👩‍👧‍👧 📯

कुछ एप्लिकेशन जल्दी से लोड होते हैं, कुछ धीरे-धीरे, लेकिन यह क्या होता है? क्या पृष्ठ लोड गति अनुप्रयोग प्रदर्शन का एकमात्र उपाय है?

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

जब प्रदर्शन के मुद्दे उठते हैं

आप वर्षों से वेब एप्लिकेशन विकसित कर सकते हैं और एप्लिकेशन प्रदर्शन के साथ लगभग कोई समस्या नहीं है।

लेकिन, सबसे अधिक संभावना है, निम्नलिखित स्थितियों में समस्याएं उत्पन्न होती हैं:

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

किस प्रदर्शन के होते हैं

वैश्विक स्तर पर, वेब एप्लिकेशन प्रदर्शन मुद्दों को दो श्रेणियों में विभाजित किया जा सकता है: डेटा ट्रांसफर और रनटाइम।

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

इनमें से प्रत्येक श्रेणी में बहुत सारी बारीकियाँ हैं, जिनके बारे में हम अक्सर सोचते नहीं हैं, लेकिन जो उच्च गुणवत्ता वाले अनुप्रयोगों को निम्न-गुणवत्ता वाले लोगों से अलग करते हैं।

यहां सबसे लोकप्रिय वेब एप्लिकेशन प्रदर्शन मीट्रिक हैं (सभी न्यूनतम होनी चाहिए):

पेज लोड हो रहा है

TTFB - पहली बाइट प्राप्त करने का समय ( टाइम टू फर्स्ट बाइट )।
FCP - पहले कंटेंट रेंडरिंग ( फर्स्ट कंटेंटफुल पेंट ) का समय।
FMP पहली सार्थक पेंट का समय है ।
टीटीआई - वह समय जब तक पेज उपयोगकर्ता इनपुट का जवाब दे सकता है ( समय से इंटरैक्टिव )।

क्रम

उपयोगकर्ता इनपुट प्रतिक्रिया समय।
इंटरफ़ेस redraw समय।

यद्यपि TTFB और TTI पृष्ठ लोड प्रदर्शन मेट्रिक्स से संबंधित हैं, वे रनटाइम संबंधित मुद्दों से प्रभावित हो सकते हैं।

प्रदर्शन के मुद्दों की खोज और विश्लेषण कैसे करें

डेवलपर के शस्त्रागार में मुख्य टूलकिट Chrome DevTools या समान उपकरण हैं, जैसे Firebug / Firefox डेवलपर टूल ।
उनके बारे में अलग-अलग लेख लिखे जा सकते हैं, लेकिन हम खुद को सबसे महत्वपूर्ण बिंदुओं तक सीमित रखेंगे।

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

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

प्रकाशस्तंभ - Chrome DevTools में बनाया गया एक टूल, जो पेज लोडिंग, रिकॉर्ड मेट्रिक्स लॉन्च करता है, उनका विश्लेषण करता है और यहां तक कि प्रदर्शन में सुधार के लिए सिफारिशें भी जारी करता है।

प्रदर्शन को कैसे मापें / मॉनिटर करें

वेब एप्लिकेशन के प्रदर्शन की निगरानी के लिए उपकरणों को दो श्रेणियों में विभाजित किया जा सकता है: वे जो सिंथेटिक माप लेते हैं और जो वास्तविक उपयोगकर्ताओं से प्रदर्शन डेटा रिकॉर्ड करते हैं।

सिंथेटिक निगरानी उपकरण में लाइटहाउस और वेबपैगेट शामिल हैं ।
वास्तविक उपयोगकर्ताओं की निगरानी के लिए (RUM - वास्तविक उपयोगकर्ता निगरानी) mPulse और Sematext उपयुक्त हैं ।

इसके अलावा, वेबपैक-बंडल-एनालाइज़र जैसे उपकरण हैं जिन्हें इन दो श्रेणियों में नहीं सौंपा जा सकता है। लेकिन उनकी मदद से, आप कुछ मापदंडों को माप सकते हैं जो प्रदर्शन को प्रभावित करते हैं, जैसे बंडल का आकार।

डेटा स्थानांतरण

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

TTFB (टाइम टू फर्स्ट बाइट) । पहली बाइट पाने का समय एक महत्वपूर्ण मीट्रिक है। इसे गति देने के लिए, आपको index.html जारी करने से पहले सर्वर पर यथासंभव कम तर्क को लागू करने का प्रयास करना चाहिए।

HTTP1 बनाम HTTP2 - HTTP2 हेडर को मल्टीप्लेक्स या कंप्रेस करके पेज लोडिंग को बहुत तेज कर सकता है। इसके अलावा, एक नया (अपेक्षाकृत) प्रोटोकॉल सर्वर पुश जैसे सुविधाओं का एक गुच्छा खोलता है।

डोमेन की साझेदारी। यदि आपको एपीआई अनुरोधों के लिए बहुत सारे HTTP हेडर भेजने की आवश्यकता है, लेकिन स्थिर अनुरोधों के लिए नहीं, तो उन्हें अलग-अलग डोमेन में अलग करना बेहतर है।

सीडीएन (सामग्री वितरण नेटवर्क) भौगोलिक रूप से वितरित ग्राहकों के लिए लोडिंग को गति देने में मदद करेगा।

संसाधन प्राथमिकताकरण (प्रीलोड, प्रीफ़ैच, प्रीकनेक्ट) सही संसाधन लोडिंग रणनीति के कारण पृष्ठ लोडिंग का त्वरण है। ब्राउज़र आपको विभिन्न प्रकार के संसाधनों के लिए प्राथमिकताएं निर्धारित करने और पहले डाउनलोड करने के लिए महत्वपूर्ण है।

स्थैतिक संपीड़न: GZIP और ब्रेटली । ब्रेटली एक संपीड़न एल्गोरिथ्म है जो स्थिर वजन को कम करेगा और तदनुसार, डाउनलोड गति बढ़ाएगा। और यहाँ मेरे सहयोगी से एक महान समाधान है।

Webp बनाम Png & Jpg। Webp Png का एक बेहतरीन विकल्प है। छवियों के कम वजन के अलावा, Webp गुणवत्ता में नीच नहीं है। अब यह प्रारूप लगभग 78% ब्राउज़रों का समर्थन करता है । लेकिन यहां तक कि अगर आपको 100% समर्थन की आवश्यकता है, तो आप तस्वीर टैग का उपयोग करके पीएनजी पर फॉलबैक लागू कर सकते हैं ।

क्रम

टास्क, माइक्रोटॉक । कोड निष्पादन को सही ढंग से प्राथमिकता देकर, आप फ्रिज़ से छुटकारा पा सकते हैं और उपयोगकर्ता इनपुट की प्रतिक्रिया को गति दे सकते हैं।

requestIdleCallback एक उपयोगी फ़ंक्शन है जो आपको फ़्रेम (फ्रेम / टिक) के अंत में या उपयोगकर्ता के निष्क्रिय होने पर अपने खाली समय में कोड निष्पादित करने की अनुमति देता है। यह सभी समान लैग्स और "फ्रीज" से छुटकारा पाने में मदद करेगा।

requestAnimationFrame आपको एनीमेशन को ठीक से नियोजित करने और 60 फ्रेम प्रति सेकंड प्रदान करने की संभावना को अधिकतम करने की अनुमति देता है।

ES2015 बनाम ईएस 5 । ES2015 ES5 की तुलना में कई सुविधाएँ अधिक उत्पादक प्रदान करता है।

डोम हेरफेर। DOM के साथ छेड़छाड़ महंगी है, आपको उन्हें सावधानीपूर्वक और सार्थक रूप से प्रदर्शन करने की आवश्यकता है। उदाहरण के लिए, किसी लूप में क्वेरीसेलेक्टर () को कॉल न करें यदि यह एक कॉल के साथ किया जा सकता है।

रेंडर ब्लॉकिंग रिसोर्स । लोड हो रहा है कुछ संसाधन रेंडरिंग को अवरुद्ध कर सकते हैं। इससे बचने के लिए, आपको गुण defer, async, preload का उपयोग करने की आवश्यकता है।

पॉइंटर-ईवेंट द्वारा 60 एफपीएस: कोई भी बड़ी हैक नहीं है जिसके साथ आप पेज को स्क्रॉल करके 60 एफपीएस प्राप्त कर सकते हैं। यह बहुत सरलता से काम करता है: सभी माउस ईवेंट हैंडलर स्क्रॉलिंग के दौरान अक्षम हो जाते हैं।

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

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

बड़े कॉम्प्लेक्स लेआउट और लेआउट थ्रशिंग से बचें । लेआउट / रिफ्लो एक महंगा ऑपरेशन है जो रेंडरिंग मापदंडों के कई पुनर्गणना करता है। उनकी लगातार कॉल से बचने के लिए, आपको लेआउट को सही ढंग से बनाने और DOM को हेरफेर करने की आवश्यकता है।

क्या बलों लेआउट / reflow - एक चीट शीट जहां आप उन कार्यों और मापदंडों की सूची पा सकते हैं जो काम करते हैं जिसके साथ लेआउट / रिफ्लो का कारण बनता है।

सभा

ट्री शेकिंग - बंडल से अप्रयुक्त कोड को हटा दें और पेज लोडिंग को गति दें।

कोड विभाजन - कोड को विखंडू में विभाजित करते हुए, आप पहले लोड को ऑप्टिमाइज़ कर सकते हैं और कोड के भागों को डाउनलोड करने की क्षमता खोल सकते हैं।

ऑबफसकेशन बंडल के आकार को कम कर सकता है और यहां तक कि आंखों को चुभने से अपने कोड को छिपाने में थोड़ी मदद भी कर सकता है।

आर्किटेक्चर

सर्वर साइड रेंडरिंग शायद सबसे अच्छा तरीका है जिससे एसपीए को पहले बूट पर तुरंत रेंडर किया जा सके। यह कुछ खोज इंजन (और न केवल) के लिए एक महत्वपूर्ण आवश्यकता है।

आलसी लोडिंग चित्र और वीडियो ( + देशी ) - छवियों और वीडियो के "आलसी" लोड होने के कारण पहली रेंडरिंग के मेट्रिक्स में सुधार करने के लिए डिज़ाइन किया गया एक देशी समाधान।

आलसी लोडिंग मॉड्यूल / मार्ग एक उपकरण है जो सभी लोकप्रिय रूपरेखाओं और पुस्तकालयों में पाया जाता है। आपको एप्लिकेशन कार्यक्षमता के "लेज़ीली" लोड टुकड़ों की अनुमति देता है।

सेवा कार्यकर्ताओं के साथ फ़ाइलों को कैशिंग करने से आप ब्राउज़र में फ़ाइलों को कैश कर सकते हैं और सर्वर से हर बार उन्हें डाउनलोड नहीं कर सकते हैं। शायद ब्राउज़र एप्लिकेशन में ऑफ़लाइन मोड करने का एकमात्र तरीका है।

HTTP कैशिंग - कुछ HTTP हेडर का उपयोग करके आप पेज लोडिंग गति में सुधार कर सकते हैं और सर्वर लोड को कम कर सकते हैं।

वेब एप्लिकेशन प्रदर्शन क्या है?

जब प्रदर्शन के मुद्दे उठते हैं

किस प्रदर्शन के होते हैं

पेज लोड हो रहा है

क्रम

प्रदर्शन के मुद्दों की खोज और विश्लेषण कैसे करें

प्रदर्शन को कैसे मापें / मॉनिटर करें

डेटा स्थानांतरण

क्रम

सभा

आर्किटेक्चर

More articles: