इस पेज का अनुवाद Cloud Translation API से किया गया है.

परफ़ॉर्मेंस पर नज़र रखने वाला टूल - परफ़ॉर्मेंस डेटा का बेहतर ऐक्सेस

Marc Cohen

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

ऑफ़लाइन और कस्टम परफ़ॉर्मेंस का विश्लेषण
तीसरे पक्ष के परफ़ॉर्मेंस विश्लेषण और विज़ुअलाइज़ेशन टूल
आईडीई और अन्य डेवलपर टूल में इंटिग्रेट किया गया, परफ़ॉर्मेंस का आकलन

इस तरह के समय से जुड़े डेटा का ऐक्सेस ज़्यादातर बड़े ब्राउज़र में नेविगेशन के समय, संसाधन समय, और उपयोगकर्ता के समय के लिए पहले से ही उपलब्ध है. इसमें सबसे नई सुविधा परफ़ॉर्मेंस ऑब्ज़र्वर इंटरफ़ेस है. यह एक स्ट्रीमिंग इंटरफ़ेस है जो कम लेवल की जानकारी को एसिंक्रोनस रूप से इकट्ठा करने के लिए ज़रूरी है. ऐसा इसलिए है, क्योंकि यह ब्राउज़र इकट्ठा करता है. टाइमलाइन ऐक्सेस करने के पुराने तरीकों की तुलना में, इस नए इंटरफ़ेस के कई अहम फ़ायदे हैं:

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

Chrome 52 में, परफ़ॉर्मेंस ऑब्ज़र्वर इंटरफ़ेस डिफ़ॉल्ट रूप से चालू होता है. आइए, अब इसे इस्तेमाल करने के तरीके पर नज़र डालते हैं.

<html>
<head>
    <script>
    var observer = new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
        // Display each reported measurement on console
        if (console) {
            console.log("Name: "       + entry.name      +
                        ", Type: "     + entry.entryType +
                        ", Start: "    + entry.startTime +
                        ", Duration: " + entry.duration  + "\n");
        }
        })
    });
    observer.observe({entryTypes: ['resource', 'mark', 'measure']});
    performance.mark('registered-observer');

    function clicked(elem) {
        performance.measure('button clicked');
    }
    </script>
</head>
<body>
    <button onclick="clicked(this)">Measure</button>
</body>
</html>

यह साधारण पेज कुछ JavaScript कोड को परिभाषित करने वाले स्क्रिप्ट टैग से शुरू होता है:

हम एक नया PerformanceObserver ऑब्जेक्ट इंस्टैंशिएट करते हैं और ऑब्जेक्ट कंस्ट्रक्टर को इवेंट हैंडलर फ़ंक्शन पास करते हैं. कंस्ट्रक्टर, ऑब्जेक्ट को इस तरह शुरू करता है कि जितनी बार मेज़रमेंट डेटा का नया सेट प्रोसेस किए जाने के लिए तैयार होगा, उतनी बार हमारे हैंडलर को कॉल किया जाएगा. इस प्रोसेस में, मेज़रमेंट डेटा को ऑब्जेक्ट की सूची के तौर पर पास किया जाता है. यहां हैंडलर को एक ऐसे फ़ंक्शन के तौर पर दिखाया गया है जिसकी पहचान नहीं की जा सकती. यह सिर्फ़ कंसोल पर फ़ॉर्मैट किए गए मेज़रमेंट डेटा को दिखाता है. असल दुनिया में, इस डेटा को बाद में विश्लेषण करने के लिए क्लाउड में सेव किया जा सकता है या किसी इंटरैक्टिव विज़ुअलाइज़ेशन टूल में डाला जा सकता है.
हम जिस इंस्टैंट इवेंट को रजिस्टर करना चाहते हैं उसे मार्क करने के लिए, हम observe() तरीके के ज़रिए टाइमिंग इवेंट के टाइप के लिए रजिस्टर करते हैं. साथ ही, mark() तरीके को कॉल करते हैं.
हम पेज के मुख्य हिस्से में बताए गए बटन के लिए, क्लिक हैंडलर तय करते हैं. यह क्लिक हैंडलर, बटन पर क्लिक किए जाने के समय का डेटा कैप्चर करने के लिए, measure() तरीके को कॉल करता है.

पेज के मुख्य हिस्से में, हमने एक बटन तय किया है और अपने क्लिक हैंडलर को onclick इवेंट के लिए असाइन किया है. अब हम ऐसा करने के लिए तैयार हैं.

अब, अगर हम पेज लोड करते हैं और JavaScript कंसोल को देखने के लिए Chrome DevTools पैनल खोलते हैं, तो हर बार बटन पर क्लिक करने पर परफ़ॉर्मेंस का आकलन किया जाता है. हमने इस तरह के मेज़रमेंट के लिए रजिस्टर किया है, इसलिए इन्हें हमारे इवेंट हैंडलर को फ़ॉरवर्ड किया जाता है. इन्हें एसिंक्रोनस तरीके से, टाइमलाइन की जानकारी देने की ज़रूरत नहीं होती है. इससे, इवेंट के दौरान मेज़रमेंट को कंसोल पर दिखाया जाता है:

start वैल्यू, mark टाइप के इवेंट के लिए शुरुआती टाइमस्टैंप दिखाती है (जिसमें से इस ऐप्लिकेशन में सिर्फ़ एक इवेंट है). measure टाइप वाले इवेंट के शुरू होने का समय तय नहीं होता है. ये पिछले mark इवेंट के हिसाब से लिए गए समय की जानकारी दिखाते हैं. इसलिए, यहां दिख रही अवधि की वैल्यू, mark() को कॉल करने के बीच में बीते समय को दिखाती हैं. यह वैल्यू, कॉल शुरू करने के सामान्य पॉइंट और बाद में measure() को किए जाने वाले कई कॉल को दिखाती है.

यह एपीआई काफ़ी आसान है. साथ ही, यह पोलिंग के बिना फ़िल्टर किया हुआ, हाई रिज़ॉल्यूशन, और रीयल-टाइम परफ़ॉर्मेंस डेटा इकट्ठा करने की सुविधा देता है. इससे वेब ऐप्लिकेशन के लिए, परफ़ॉर्मेंस टूल को बेहतर बनाने में मदद मिलती है.