उपयोगकर्ता समय एपीआई

यह लेख 21 जनवरी 2014 को HTML5Rocks के योगदानकर्ता एलेक्स डैनिलो द्वारा लिखा गया था। मैं यह नोट करना चाहता हूं कि यह हैबे पर मेरा पहला अनुवाद है, इसलिए मैं इससे भी अधिक आलोचना के लिए तैयार हूं। सभी समस्याओं और कमियों के लिए, मुझे व्यक्तिगत रूप से लिखने का प्रयास करें, मैं इसे तुरंत सही करूंगा। मूल अंग्रेजी में ।

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

जो नापा नहीं जा सकता, उसे अनुकूलित करना असंभव है

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

उच्च संकल्प समय और विधि अब ()

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

आवेदन में वर्तमान समय पाने के लिए, आपको अब () विधि को कॉल करना होगा, जो प्रदर्शन इंटरफ़ेस का विस्तार है।

var myTime = window.performance.now(); 

प्रदर्शन इंटरफ़ेसिंग नामक एक अन्य इंटरफ़ेस है जो वेब एप्लिकेशन लोड होने से संबंधित समय बिंदुओं का एक सेट प्रदान करता है। अब () विधि नेविगेशनटार्ट के बाद से प्रदर्शन किए गए समय को वापस लाती है।

DOMHighResTimeStamp टाइप करें

पहले, वर्तमान आवेदन समय प्राप्त करने के लिए, Date.now () फ़ंक्शन का उपयोग किया गया था, जिसने DOMTimeStamp को वापस कर दिया । DOMTimeStamp ने मिलीसेकंड का पूर्णांक लौटाया। उच्च रिज़ॉल्यूशन समय के लिए उच्च सटीकता प्रदान करने के लिए, DOMHighResTimeStamp नामक एक नया प्रकार पेश किया गया था। इस प्रकार का पहले से ही एक अस्थायी बिंदु है, हालांकि यह मिलीसेकंड में भी समय देता है। लेकिन, एक गैर-पूर्णांक मूल्य के लिए धन्यवाद, समय में आंशिक मिलीसेकंड होता है और एक मिलीसेकंड के एक हजारवें हिस्से को सटीकता प्रदान करता है।

यूजर टाइमिंग इंटरफेस

चूंकि अब हमारे पास उच्च-सटीक समय है, आप समय की जानकारी प्राप्त करने के लिए उपयोगकर्ता समय का उपयोग करना शुरू कर सकते हैं।

उपयोगकर्ता टाइमिंग इंटरफ़ेस हमें ऐसे फ़ंक्शन प्रदान करता है जिन्हें कमजोरियों की पहचान करने के लिए एप्लिकेशन के विभिन्न स्थानों में बुलाया जा सकता है।

चिह्न () का उपयोग करना

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

विभिन्न स्थानों में निशान () का उपयोग करके, आप यह निर्धारित कर सकते हैं कि कॉल के बीच कितना समय बीत चुका है।

विनिर्देशन ने मानक लेबल नाम प्रदान किए हैं जो बहुत समझ में आते हैं, उदाहरण के लिए: 'mark_fully_loaded', 'mark_fully_vanish', 'mark_above_the_fold', आदि।

एक उदाहरण के लिए, हम एक निशान बना सकते हैं जब आवेदन पूरी तरह से भरा हुआ हो:

 window.performance.mark('mark_fully_loaded'); 

पूरे एप्लिकेशन में नामित लेबल सेट करके, हम एक बड़ी मात्रा में डेटा एकत्र कर सकते हैं और आवेदन पर समय बिताने के लिए क्या और कब खर्च करना है, इसका पता लगाने के लिए अपने अवकाश पर इसका विश्लेषण करते हैं।

माप और माप () विधि

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

 window.performance.measure('measure_load_from_dom', 'domComplete', 'mark_fully_loaded'); 

नोट: इस उदाहरण में, हम प्रदर्शन टाइमिंग इंटरफ़ेस से आरक्षित नाम 'डोमकंप्लीट' पास करते हैं।

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

क्लीयरमार्क्स के साथ अंक रीसेट करना ()

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

क्लीयरमार्क्स () कहकर सेट मार्क्स से छुटकारा पाना काफी आसान है।

इस प्रकार, निम्नलिखित कोड उदाहरण सभी मौजूदा निशान को साफ कर देगा, इसलिए यदि आप चाहें तो इसे फिर से सेट कर सकते हैं।

 window.performance.clearMarks(); 

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

 window.peformance.clearMarks('mark_fully_loaded'); 

यह कोड ऊपर सहेजे गए निशान से छुटकारा दिलाता है। लेकिन अन्य सभी निशान गायब नहीं होंगे।

आप अपने द्वारा किए गए मापों को हटाना भी चाह सकते हैं। इसके लिए एक उपयुक्त क्लीयरमाइज़र () विधि है। यह क्लियरमार्क्स () की तरह ही काम करता है। उदाहरण के लिए:

 window.performance.clearMeasures('measure_load_from_dom'); 

ऊपर दिए उदाहरण में सहेजे गए आयाम को हटा देंगे। सभी आयामों को हटाने के लिए, आपको तर्कों के बिना उसी विधि को कॉल करना होगा, जैसे क्लीयरमार्क्स () में।

समय डेटा की बचत

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

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

निम्नलिखित कोड:

 var items = window.performance.getEntriesByType('mark'); 

इस कोड में, जबकि आवेदन में चिह्नित सभी निशान लौटाता है:

 var items = window.performance.getEntriesByType('measure'); 

किए गए सभी माप लौटाता है।

आप उन नामों की प्रविष्टियों की सूची भी प्राप्त कर सकते हैं जिन्हें आपने उन्हें सौंपा था:

 var items = window.performance.getEntriesByName('mark_fully_loaded'); 

टाइमस्टैंप में एक तत्व के साथ एक सूची लौटाएगा, जो startTime संपत्ति में 'mark_fully_loaded' है।

XHR अनुरोध का उदाहरण समय गणना

अब जब हमारे पास उपयोगकर्ता समय एपीआई की एक पूरी तस्वीर है, तो हम यह निर्धारित करेंगे कि हमारे सभी XHR अनुरोध कितने समय से चल रहे हैं।

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

आमतौर पर, एक साधारण XHR अनुरोध इस तरह दिखता है:

 var myReq = new XMLHttpRequest(); myReq.open('GET', url, true); myReq.onload = function(e) { do_something(e.responseText); } myReq.send(); 

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

 var reqCount = 0; var myReq = new XMLHttpRequest(); myReq.open('GET', url, true); myReq.onload = function(e) { window.performance.mark('mark_end_xhr'); reqCnt++; window.performance.measure('measure_xhr_' + reqCnt, 'mark_start_xhr', 'mark_end_xhr'); do_something(e.responseText); } window.performance.mark('mark_start_xhr'); myReq.send(); 

यह कोड प्रत्येक XHR अनुरोध के लिए एक अद्वितीय नाम के साथ एक आयाम उत्पन्न करता है जिसे हम भेजते हैं। हम मानते हैं कि सभी अनुरोधों को क्रमिक रूप से निष्पादित किया जाता है, समानांतर अनुरोधों के लिए, कोड को थोड़ा संशोधित करने की आवश्यकता है। इसलिए, हम इसे पाठकों के लिए एक घरेलू अभ्यास के रूप में छोड़ दें।

वेब एप्लिकेशन द्वारा कई अनुरोध किए जाने के बाद, हम निम्नलिखित कोड के साथ कंसोल में डेटा आउटपुट कर सकते हैं:

 var items = window.performance.getEntriesByType('measure'); for (var i = 0; i < items.length(); ++i) { var req = items[i]; console.log('XHR ' + req.name + ' took ' + req.duration + 'ms'); } 

निष्कर्ष

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