प्रोग्रेसिव वेब ऐप्लिकेशन की मदद से, डेवलपर ऐसे ऐप्लिकेशन बना सकते हैं जो उपयोगकर्ताओं को भरोसेमंद और बेहतर परफ़ॉर्मेंस वाला अनुभव देते हैं. हालांकि, यह पक्का करने के लिए कि कोई वेब ऐप्लिकेशन अपनी परफ़ॉर्मेंस के लक्ष्यों को हासिल कर रहा है या नहीं, डेवलपर को परफ़ॉर्मेंस मेज़रमेंट के लिए, हाई रिज़ॉल्यूशन वाले डेटा का ऐक्सेस चाहिए. W3C परफ़ॉर्मेंस टाइमलाइन स्पेसिफ़िकेशन, ब्राउज़र के लिए ऐसे इंटरफ़ेस की जानकारी देता है जिससे कम लेवल के टाइमिंग डेटा को प्रोग्राम के हिसाब से ऐक्सेस किया जा सके. इससे, इस्तेमाल के कुछ दिलचस्प उदाहरण सामने आते हैं:
- ऑफ़लाइन और कस्टम परफ़ॉर्मेंस का विश्लेषण
- तीसरे पक्ष के परफ़ॉर्मेंस विश्लेषण और विज़ुअलाइज़ेशन टूल
- IDEs और अन्य डेवलपर टूल में इंटिग्रेट की गई परफ़ॉर्मेंस का आकलन
नेविगेशन टाइमिंग, रिसॉर्स टाइमिंग, और उपयोगकर्ता टाइमिंग के लिए, टाइमिंग के इस तरह के डेटा का ऐक्सेस, ज़्यादातर बड़े ब्राउज़र में पहले से ही उपलब्ध है. इसमें सबसे नई सुविधा परफ़ॉर्मेंस ऑब्ज़र्वर इंटरफ़ेस है. यह एक स्ट्रीमिंग इंटरफ़ेस है, जो कम लेवल की टाइमिंग की जानकारी को असिंक्रोनस तरीके से इकट्ठा करता है. यह जानकारी ब्राउज़र से इकट्ठा की जाती है. टाइमलाइन को ऐक्सेस करने के पिछले तरीकों की तुलना में, यह नया इंटरफ़ेस कई अहम फ़ायदे देता है:
- फ़िलहाल, ऐप्लिकेशन को समय-समय पर सेव किए गए मेज़रमेंट को पोल करना पड़ता है और उनमें अंतर करना पड़ता है. इससे ज़्यादा डेटा ट्रैफ़िक का इस्तेमाल होता है. इस इंटरफ़ेस में, उन्हें कॉलबैक का विकल्प मिलता है. दूसरे शब्दों में, पोल करने की ज़रूरत नहीं है). इस वजह से, इस एपीआई का इस्तेमाल करने वाले ऐप्लिकेशन ज़्यादा रिस्पॉन्सिव और असरदार हो सकते हैं.
- यह बफ़र की सीमाओं पर लागू नहीं होता. ज़्यादातर बफ़र डिफ़ॉल्ट रूप से 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() को कॉल करने के बाद से अब तक बीत चुके समय को दिखाती हैं. mark() को कॉल करने के बाद, एक से ज़्यादा कॉल किए जाते हैं. इन कॉल के बीच के समय को भी अवधि की वैल्यू में शामिल किया जाता है.measure()
जैसा कि आप देख सकते हैं, यह एपीआई काफ़ी आसान है. साथ ही, यह पोलिंग के बिना, फ़िल्टर किया गया, हाई रिज़ॉल्यूशन वाला, रीयल टाइम परफ़ॉर्मेंस डेटा इकट्ठा करने की सुविधा देता है. इससे, वेब ऐप्लिकेशन के लिए परफ़ॉर्मेंस टूल को ज़्यादा असरदार बनाने में मदद मिलेगी.