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