Extensibility API की मदद से, परफ़ॉर्मेंस डेटा को पसंद के मुताबिक बनाना

Andrés Olivares
Andrés Olivares
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

खास जानकारी

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

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

इस एपीआई की मदद से, ऐसा दो तरीकों से किया जा सकता है:

1. console.timeStamp एपीआई (DevTools के लिए बढ़ाया गया)

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

2. User Timings API (performance.mark और performance.measure का इस्तेमाल करके)

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

परफ़ॉर्मेंस पैनल में कस्टम ट्रैक कैसे दिखते हैं, इसका एक उदाहरण.

मुख्य फ़ायदे

दोनों एपीआई में ये सुविधाएं मिलती हैं:

  • कस्टम ट्रैक: अपने कोड की परफ़ॉर्मेंस के खास पहलुओं को दिखाने के लिए, ट्रैक और ट्रैक ग्रुप जोड़ें.
  • एंट्री: इन ट्रैक में ऐसी एंट्री जोड़ें जो अहम इवेंट या किसी खास कार्रवाई की अवधि को साफ़ तौर पर दिखाती हों.
  • रंगों को पसंद के मुताबिक बनाना: कलर-कोडिंग का इस्तेमाल करके, अलग-अलग तरह के इवेंट या मेज़रमेंट को एक नज़र में पहचाना जा सकता है.

अपनी ज़रूरतों के हिसाब से सही एपीआई चुनना:

  • console.timeStamp API:

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

  • User Timings API (performance.mark, performance.measure):

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

console.timeStamp की मदद से अपना डेटा इंजेक्ट करें

console.timeStamp API को इस तरह से बेहतर बनाया गया है कि परफ़ॉर्मेंस पैनल में कस्टम टाइमिंग एंट्री बनाई जा सकें. इसके लिए, कम से कम ओवरहेड की ज़रूरत होती है. खास तौर पर, तब जब DevTools किसी ट्रेस को रिकॉर्ड नहीं कर रहा हो.

console.timeStamp(label: string, start?: string|number, end?: string|number, trackName?: string, trackGroup?: string, color?: DevToolsColor);

  • label:

    टाइमिंग की जानकारी के लिए लेबल.

  • start (ज़रूरी नहीं):

    • अगर इसे स्ट्रिंग के तौर पर तय किया गया है, तो इसका मतलब है कि यह पहले से रिकॉर्ड किए गए टाइमस्टैंप का नाम है. इसे console.timeStamp(timeStampName) का इस्तेमाल करके रिकॉर्ड किया गया था.

    • अगर इसे संख्या के तौर पर तय किया गया है, तो यह Performance.timeOrigin के हिसाब से मिलीसेकंड में टाइमस्टैंप होता है. उदाहरण के लिए, performance.now() के साथ लिया गया टाइमस्टैंप. यह टाइमिंग एंट्री के शुरू होने का समय दिखाता है.

    • अगर यह पैरामीटर तय नहीं किया गया है, तो मौजूदा समय को शुरू होने के समय के तौर पर इस्तेमाल किया जाता है.

  • end:

    • अगर स्ट्रिंग के तौर पर तय किया गया है: पहले से रिकॉर्ड किए गए टाइमस्टैंप का नाम.

    • अगर इसे संख्या के तौर पर तय किया गया है, तो यह Performance.timeOrigin के हिसाब से मिलीसेकंड में टाइमस्टैंप होता है. उदाहरण के लिए, performance.now() के साथ लिया गया. यह टाइमिंग एंट्री के खत्म होने के समय को दिखाता है.

    • अगर यह जानकारी नहीं दी जाती है, तो मौजूदा समय को खत्म होने का समय माना जाता है.

  • trackName:

    कस्टम ट्रैक का नाम.

  • trackGroup:

    ट्रैक ग्रुप का नाम.

  • color:

    मौजूदा जानकारी का रंग.

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
}

टाइमलाइन में अपना डेटा देखना

टाइमलाइन में कस्टम डेटा देखने के लिए, परफ़ॉर्मेंस पैनल में जाकर पक्का करें कि यह सेटिंग चालू हो: कैप्चर सेटिंग > कस्टम ट्रैक दिखाएं.

परफ़ॉर्मेंस पैनल की 'कैप्चर सेटिंग' में मौजूद, 'कस्टम ट्रैक दिखाएं' चेकबॉक्स.

इसे इस डेमो पेज पर आज़माएं. परफ़ॉर्मेंस रिकॉर्डिंग शुरू करें. इसके बाद, डेमो पेज पर Add new Corgi पर क्लिक करें और रिकॉर्डिंग बंद करें. आपको ट्रेस में एक कस्टम ट्रैक दिखेगा. इसमें कस्टम टूलटिप वाले इवेंट, खास जानकारी टैब में मौजूद जानकारी, और ट्रेस की खास जानकारी में कस्टम ट्रैक ग्रुप की खास जानकारी शामिल होगी.

कोड के उदाहरण

यहां कुछ उदाहरण दिए गए हैं. इनमें, उपलब्ध हर तरीके का इस्तेमाल करके, परफ़ॉर्मेंस पैनल में अपना डेटा जोड़ने के लिए, एपीआई का इस्तेमाल करने का तरीका बताया गया है.

console.timeStamp एपीआई के उदाहरण:

// Take a start timestamp
const start = performance.now();

// Measure duration from start to now
console.timeStamp("measure 1", start, undefined, "My Track", "My Group", "primary-light");

// Take an end timestamp
const end = performance.now();

// Measure duration from start to end
console.timeStamp("measure 2", start, end, "My Track", "My Group", "secondary-dark");

इससे परफ़ॉर्मेंस टाइमलाइन में, कस्टम ट्रैक की यह एंट्री दिखती है:

console.timeStamp API की मदद से जोड़ी गई कस्टम एंट्री वाला कस्टम ट्रैक.

उपयोगकर्ता समय API के उदाहरण:

अगले सेक्शन में, ऐसे कोड के उदाहरण दिए गए हैं जिनसे पता चलता है कि परफ़ॉर्मेंस टाइमलाइन में ये चीज़ें कैसे जोड़ी जाती हैं:

कस्टम ट्रैक और एंट्री

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

// Mark used to represent the start of the image processing task
// The start time is defaulted to now
const imageProcessinTimeStart = performance.now();

// ... 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: imageProcessinTimeStart,
  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"
    }
  }
});

इससे टाइमिंग ट्रैक में यह मार्कर दिखता है. साथ ही, इसका टूलटिप टेक्स्ट और प्रॉपर्टी भी दिखती हैं:

टाइमिंग ट्रैक में मौजूद कस्टम मार्कर.