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

मार्क कोहेन

प्रोग्रेसिव वेब ऐप्लिकेशन की मदद से, डेवलपर को ऐसे ऐप्लिकेशन बनाने की नई कैटगरी मिलती है जो भरोसेमंद और बेहतर परफ़ॉर्म करने वाले उपयोगकर्ता अनुभव देते हैं. हालांकि, यह पक्का करने के लिए कि वेब ऐप्लिकेशन अपने मनचाहे परफ़ॉर्मेंस लक्ष्यों को हासिल कर रहा है, डेवलपर के पास हाई रिज़ॉल्यूशन परफ़ॉर्मेंस मेज़रमेंट डेटा का ऐक्सेस होना चाहिए. 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() पर आने वाले कई कॉल के तौर पर काम करता है.

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