खास जानकारी
परफ़ॉर्मेंस पैनल, परफ़ॉर्मेंस एक्सटेंसिबिलिटी एपीआई के साथ काम करता है. इससे, परफ़ॉर्मेंस टाइमलाइन में कस्टम डेटा जोड़ा जा सकता है. इससे, अपने मेज़रमेंट और इवेंट को सीधे परफ़ॉर्मेंस टाइमलाइन में कस्टम ट्रैक या टाइमिंग ट्रैक के तौर पर इंजेक्ट किया जा सकता है. यह सुविधा, कस्टम इंस्ट्रूमेंटेशन वाले फ़्रेमवर्क, लाइब्रेरी, और जटिल ऐप्लिकेशन के डेवलपर के लिए मददगार हो सकती है. इससे उन्हें परफ़ॉर्मेंस के बारे में ज़्यादा जानकारी मिलती है.
यह एपीआई दो अलग-अलग तरीके उपलब्ध कराता है:
1. User Timings API (performance.mark और performance.measure का इस्तेमाल करके)
यह एपीआई, मौजूदा उपयोगकर्ता के समय की जानकारी देने वाले एपीआई का फ़ायदा लेता है. यह ब्राउज़र की इंटरनलपरफ़ॉर्मेंस टाइमलाइन में भी एंट्री जोड़ता है. इससे, परफ़ॉर्मेंस के अन्य टूल के साथ विश्लेषण और इंटिग्रेशन की सुविधा मिलती है.
2. console.timeStamp एपीआई (DevTools के लिए उपलब्ध)
यह एपीआई, ऐप्लिकेशन को इंस्ट्रूमेंट करने और DevTools में परफ़ॉर्मेंस पैनल में खास तौर पर टाइमिंग डेटा दिखाने के लिए, बेहतर परफ़ॉर्मेंस वाला तरीका उपलब्ध कराता है. इसे कम से कम रनटाइम ओवरहेड के लिए डिज़ाइन किया गया है. इससे, इसे हॉट पाथ और प्रोडक्शन बिल्ड को इंस्ट्रूमेंट करने के लिए इस्तेमाल किया जा सकता है. यह ब्राउज़र की परफ़ॉर्मेंस की इंटरनल टाइमलाइन में एंट्री नहीं जोड़ता.
मुख्य सुविधाएं
दोनों एपीआई ये सुविधाएं देते हैं:
- कस्टम ट्रैक: कस्टम ट्रैक और ट्रैक ग्रुप में एंट्री जोड़ें.
- एंट्री: इवेंट या मेज़रमेंट दिखाने वाली एंट्री की मदद से ट्रैक पॉप्युलेट करें.
- पसंद के मुताबिक रंग चुनना: विज़ुअल में अंतर दिखाने के लिए, एंट्री को कलर-कोड करना.
मुख्य अंतर और हर एपीआई का इस्तेमाल कब करना है:
- User Timings API (
performance.mark,performance.measure):- यह परफ़ॉर्मेंस पैनल और ब्राउज़र की इंटरनल परफ़ॉर्मेंस टाइमलाइन, दोनों में एंट्री जोड़ता है.
- टूलटिप और ज़्यादा जानकारी वाली प्रॉपर्टी के साथ-साथ, रिच डेटा दिखाने की सुविधा देता है.
- मार्कर जोड़ने की सुविधा: विज़ुअल मार्कर की मदद से, टाइमलाइन में खास पलों को हाइलाइट करें.
- यह परफ़ॉर्मेंस के बारे में ज़्यादा जानकारी देने वाले विश्लेषण के लिए सही है. साथ ही, यह तब भी सही है, जब परफ़ॉर्मेंस के अन्य टूल के साथ इंटिग्रेशन की ज़रूरत हो.
- इसका इस्तेमाल तब करें, जब आपको हर एंट्री के साथ अतिरिक्त डेटा सेव करना हो और User Timings API का इस्तेमाल पहले से किया जा रहा हो.
console.timeStampएपीआई:- परफ़ॉर्मेंस पैनल में सिर्फ़ एंट्री जोड़ता है.
- खास तौर पर, प्रोडक्शन एनवायरमेंट में काफ़ी बेहतर परफ़ॉर्मेंस मिलती है.
- यह हॉट पाथ और परफ़ॉर्मेंस के लिहाज़ से अहम कोड को इंस्ट्रूमेंट करने के लिए एकदम सही है.
- टूलटिप या प्रॉपर्टी जैसा कोई अतिरिक्त डेटा नहीं जोड़ा जा सकता.
- जब परफ़ॉर्मेंस में होने वाली रुकावट मुख्य समस्या हो और आपको कोड को तुरंत इंस्ट्रूमेंट करना हो, तब इसका इस्तेमाल करें.
User Timings API की मदद से अपना डेटा इंजेक्ट करना
कस्टम डेटा इंजेक्ट करने के लिए, performance.mark और performance.measure तरीकों की detail प्रॉपर्टी में devtools ऑब्जेक्ट शामिल करें. इस devtools ऑब्जेक्ट के स्ट्रक्चर से यह तय होता है कि परफ़ॉर्मेंस पैनल में आपका डेटा कैसे दिखेगा.
टाइमलाइन में कोई इवेंट या टाइमस्टैंप रिकॉर्ड करने के लिए,
performance.markका इस्तेमाल करें. किसी खास कार्रवाई या दिलचस्पी के किसी ऐसे पॉइंट की शुरुआत या आखिर को मार्क किया जा सकता है जिसकी अवधि नहीं है.detailप्रॉपर्टी मेंdevtoolsऑब्जेक्ट शामिल करने पर, परफ़ॉर्मेंस पैनल, समय ट्रैक में कस्टम मार्कर दिखाता है.किसी टास्क या प्रोसेस की अवधि मेज़र करने के लिए,
performance.measureका इस्तेमाल करें.detailप्रॉपर्टी मेंdevtoolsऑब्जेक्ट शामिल करने पर, परफ़ॉर्मेंस पैनल, कस्टम ट्रैक में टाइमलाइन में कस्टम मेज़रमेंट एंट्री दिखाता है. अगरperformance.measureबनाने के लिए,performance.markको रेफ़रंस पॉइंट के तौर पर इस्तेमाल किया जा रहा है, तो आपकोperformance.markकॉल मेंdevtoolsऑब्जेक्ट शामिल करने की ज़रूरत नहीं है.
devtools ऑब्जेक्ट
ये टाइप, एक्सटेंशन की अलग-अलग सुविधाओं के लिए devtools ऑब्जेक्ट के स्ट्रक्चर के बारे में बताते हैं:
type DevToolsColor =
"primary" | "primary-light" | "primary-dark" |
"secondary" | "secondary-light" | "secondary-dark" |
"tertiary" | "tertiary-light" | "tertiary-dark" |
"error";
interface ExtensionTrackEntryPayload {
dataType?: "track-entry"; // Defaults to "track-entry"
color?: DevToolsColor; // Defaults to "primary"
track: string; // Required: Name of the custom track
trackGroup?: string; // Optional: Group for organizing tracks
properties?: [string, string][]; // Key-value pairs for detailed view
tooltipText?: string; // Short description for tooltip
}
interface ExtensionMarkerPayload {
dataType: "marker"; // Required: Identifies as a marker
color?: DevToolsColor; // Defaults to "primary"
properties?: [string, string][]; // Key-value pairs for detailed view
tooltipText?: string; // Short description for tooltip
}
console.timeStamp की मदद से डेटा डालना
console.timeStamp API को बेहतर बनाया गया है, ताकि परफ़ॉर्मेंस पैनल में कम से कम ओवरहेड के साथ कस्टम टाइमिंग एंट्री बनाई जा सकें.
console.timeStamp(label: string, start?: string, end?: string, trackName?: string, trackGroup?: string, color?: DevToolsColor);
label: टाइमिंग एंट्री का लेबल.start: पहले से रिकॉर्ड किए गए टाइमस्टैंप का नाम (console.timeStamp(timeStampName)का इस्तेमाल करके). अगर यह पैरामीटर तय नहीं किया गया है, तो मौजूदा समय का इस्तेमाल किया जाता है.end: पहले से रिकॉर्ड किए गए टाइमस्टैंप का नाम. अगर यह पैरामीटर तय नहीं किया गया है, तो मौजूदा समय का इस्तेमाल किया जाएगा.trackName: कस्टम ट्रैक का नाम.trackGroup: ट्रैक ग्रुप का नाम.color: एंट्री का रंग.
टाइमलाइन में अपना डेटा देखना
टाइमलाइन में अपना कस्टम डेटा देखने के लिए, परफ़ॉर्मेंस पैनल में, कैप्चर सेटिंग > एक्सटेंशन डेटा को चालू करें.
इसे इस डेमो पेज पर आज़माएं. एक्सटेंशन डेटा चालू करें, परफ़ॉर्मेंस रिकॉर्डिंग शुरू करें, और डेमो पेज पर नया कोर्गी जोड़ें पर क्लिक करें. इसके बाद, रिकॉर्डिंग बंद करें. आपको ट्रेस में एक कस्टम ट्रैक दिखेगा. इसमें खास जानकारी टैब में, कस्टम टूलटिप और जानकारी वाले इवेंट शामिल होंगे.
कोड के उदाहरण
यहां एपीआई का इस्तेमाल करके, परफ़ॉर्मेंस पैनल में अपना डेटा जोड़ने का तरीका बताने वाले कुछ उदाहरण दिए गए हैं. इसके लिए, उपलब्ध हर तरीके का इस्तेमाल किया गया है.
User Timings API के उदाहरण:
अगले सेक्शन में, कोड के ऐसे उदाहरण देखें जिनसे पता चलता है कि परफ़ॉर्मेंस टाइमलाइन में ये चीज़ें कैसे जोड़ें:
कस्टम ट्रैक और एंट्री
कस्टम ट्रैक बनाएं और उनमें एंट्री भरें, ताकि कस्टम ट्रैक में अपनी परफ़ॉर्मेंस का डेटा विज़ुअलाइज़ किया जा सके. उदाहरण के लिए:
// Mark used to represent the start of the image processing task
// The start time is defaulted to now
performance.mark("Image Processing Start");
// ... later in your code
// Track entry representing the completion of image processing
// with additional details and a tooltip
// The start time is a marker from earlier
// The end time is defaulted to now
performance.measure("Image Processing Complete", {
start: "Image Processing Start",
detail: {
devtools: {
dataType: "track-entry",
track: "Image Processing Tasks",
trackGroup: "My Tracks", // Group related tracks together
color: "tertiary-dark",
properties: [
["Filter Type", "Gaussian Blur"],
["Resize Dimensions", "500x300"]
],
tooltipText: "Image processed successfully"
}
}
});
इससे, परफ़ॉर्मेंस टाइमलाइन में, टूलटिप टेक्स्ट और प्रॉपर्टी के साथ-साथ, कस्टम ट्रैक की यह एंट्री दिखती है:
मार्कर
सभी ट्रैक में मौजूद कस्टम मार्कर की मदद से, टाइमलाइन में दिलचस्प पॉइंट को विज़ुअल तौर पर हाइलाइट करें. उदाहरण के लिए:
// Marker indicating when the processed image was uploaded
performance.mark("Image Upload", {
detail: {
devtools: {
dataType: "marker",
color: "secondary",
properties: [
["Image Size", "2.5MB"],
["Upload Destination", "Cloud Storage"]
],
tooltipText: "Processed image uploaded"
}
}
});
इससे टाइमिंग ट्रैक में, टूलटिप टेक्स्ट और प्रॉपर्टी के साथ यह मार्कर दिखता है:
console.timeStamp एपीआई के उदाहरण:
// Record a start timestamp
console.timeStamp("start");
// Measure duration from start to now
console.timeStamp("measure 1", "start", undefined, "My Track", "My Group", "primary-light");
// Record an end timestamp
console.timeStamp("end");
// Measure duration from start to end
console.timeStamp("measure 2", "start", "end", "My Track", "My Group", "secondary-dark");
इससे परफ़ॉर्मेंस टाइमलाइन में, कस्टम ट्रैक की यह एंट्री दिखती है:
