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

यह 21 जनवरी 2014 को प्रकाशित यूजर टाइमिंग एपीआई पर एलेक्स डैनिलो के लेख का अनुवाद है ।

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

आप जो माप नहीं सकते, उसका अनुकूलन नहीं कर सकते

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

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

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

var myTime = window.performance.now(); 

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

DOMHighResTimeStamp टाइप करें

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

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

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

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

समय विश्लेषण टूलकिट में ' चिह्न () ' विधि मुख्य उपकरण है। मार्क () आपको टाइमस्टैम्प को बचाने की अनुमति देता है। विशेष रूप से उपयोगी टाइमस्टैम्प नाम देने की क्षमता है।

कोड के विभिन्न भागों में कॉलिंग मार्क () यह निर्धारित करेगा कि इस चिह्न तक पहुंचने में कितना समय लगा।
विनिर्देश कई पूर्वनिर्धारित लेबल प्रदान करता है जो उपयोगी हो सकते हैं - 'mark_fully_loaded', 'mark_fully_vanish', 'mark_above_the_fold' ", आदि।
उदाहरण के लिए, आप यह निर्धारित करने के लिए एक लेबल सेट कर सकते हैं कि निम्नलिखित कोड का उपयोग करते समय आवेदन पूरी तरह से भरा हुआ था:

 window.performance.mark('mark_fully_loaded'); 

एक वेब एप्लिकेशन में नामित लेबल सेट करने से आपको अपनी मौजूदा समय लागतों का विश्लेषण करने के लिए अधिक रनटाइम जानकारी एकत्र करने में मदद मिल सकती है।

माप के साथ माप की गणना ()

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

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

नोट: इस उदाहरण में, ईवेंट नाम " domComplete " को PerformanceTiming इंटरफ़ेस से पास किया गया है।

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

'ClearMarks ()' के साथ टैग हटाना

पहले से ही बनाए गए टैग से छुटकारा पाने में सक्षम होना कभी-कभी उपयोगी होता है। उदाहरण के लिए, जब आपको प्रत्येक लॉन्च से पहले परिणाम रीसेट करने की आवश्यकता होती है, तो आपको प्रोफाइलिंग के हिस्से के रूप में लॉन्च किए गए बैच एप्लिकेशन का संचालन करते समय इसकी आवश्यकता हो सकती है। ' ClearMarks () ' कहकर, जो भी टैग सेट किए गए हैं उनसे छुटकारा पाना आसान है।
यह कोड सभी मौजूदा निशान हटा देगा:

 window.performance.clearMarks(); 

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

 window.peformance.clearMarks('mark_fully_loaded'); 

पहले से किए गए मापों को हटाने के लिए भी आवश्यक हो सकता है, जिसके लिए एक समान विधि 'ClearMeasures ()' है। ऑपरेशन का सिद्धांत क्लियरमार्क्स () के समान है, लेकिन अंकों के बजाय, माप हटा दिए जाते हैं। उदाहरण के लिए, निम्न कोड माप के बारे में पिछले उदाहरण में निर्धारित आयामों को हटा देगा ():

 window.performance.clearMeasures('measure_load_from_dom'); 

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

डेटा पुनर्प्राप्ति

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

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

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

जबकि निम्नलिखित कोड सभी आयामों की एक सूची देता है:

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

आप नामांकित अंकों की एक सूची भी प्राप्त कर सकते हैं। उदाहरण के लिए, निम्नलिखित कोड एक सूची के साथ एक प्रविष्टि लौटाएगा जिसमें startTime संपत्ति में 'mark_fully_loaded' चिह्न होगा।

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

XHR अनुरोध का परीक्षण करना (उदाहरण)

अब, उपयोगकर्ता समय एपीआई पर एक संक्षिप्त नज़र के बाद, आप इसका उपयोग आवेदन में XMLHttpRequest की अवधि का विश्लेषण करने के लिए कर सकते हैं।

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

नियमित XMLHttpRequest कुछ इस तरह दिखेगा:

 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'); reqCount++; window.performance.measure('measure_xhr_' + reqCnt, 'mark_start_xhr', 'mark_end_xhr'); do_something(e.responseText); } 

यह कोड प्रत्येक XMLHttpRequest भेजे गए अद्वितीय नामों के साथ आयाम उत्पन्न करता है। यह माना जाता है कि प्रश्नों को क्रमिक रूप से निष्पादित किया जाता है - समानांतर प्रश्नों के लिए कोड थोड़ा अधिक जटिल होगा। यह पाठक के लिए एक अभ्यास के रूप में काम करेगा।

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

 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'); } 

निष्कर्ष

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