התאמה אישית של נתוני הביצועים באמצעות API להרחבה

Andrés Olivares

Sofia Emelianova

סקירה כללית

בחלונית ביצועים יש תמיכה ב-API להרחבת הביצועים, שמאפשר לכם להוסיף נתונים מותאמים אישית לציר הזמן של הביצועים.

ה-API הזה משתמש ב-User Timings API הקיים ומאפשר להחדיר את המדידות והאירועים ישירות לציר הזמן של הביצועים כטראק מותאם אישית או כטראק Timings. האפשרות הזו עשויה להיות שימושית למפתחים של מסגרות, ספריות ואפליקציות מורכבות עם מכשירי מדידה מותאמים אישית, כדי לקבל תמונה מקיפה יותר של הביצועים.

תכונות עיקריות

• טראקים מותאמים אישית: אפשר ליצור טראקים ייעודיים כדי להציג באופן חזותי נתונים משלכם שמבוססים על זמן.
• רשומות: אכלוס מסלולים עם רשומות שמייצגות אירועים או מדידות.
• טיפים ופרטים: מספקים הקשר עשיר לרשומות עם הסברים קצרים שאפשר להתאים אישית ותצוגות מפורטות.
• סמנים: הדגשה של רגעים ספציפיים בציר הזמן באמצעות סמנים חזותיים.

הוספת נתונים באמצעות User Timings API

כדי להחדיר נתונים מותאמים אישית, צריך לכלול אובייקט devtools במאפיין detail של השיטות performance.mark ו-performance.measure. המבנה של אובייקט devtools הזה קובע איך הנתונים שלכם מוצגים בחלונית ביצועים.

• משתמשים ב-performance.mark כדי לתעד אירוע מיידי או חותמת זמן בציר הזמן. אפשר לסמן את ההתחלה או הסיום של פעולה ספציפית או כל נקודת עניין שאין לה משך זמן. כשכוללים אובייקט devtools במאפיין detail, בחלונית ביצועים מופיע סמן מותאם אישית במסלול תזמונים.

• בעזרת performance.measure אפשר למדוד את משך הזמן של משימה או תהליך. כשכוללים אובייקט devtools בנכס detail, בחלונית ביצועים מוצגות רשומות מדידה מותאמות אישית בציר הזמן במסלול מותאם אישית. אם משתמשים ב-performance.mark כנקודת התייחסות כדי ליצור performance.measure, אין צורך לכלול את האובייקט devtools בקריאות של performance.mark.

אובייקט אחד (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
}

הצגת הנתונים בציר הזמן

כדי לראות את הנתונים המותאמים אישית בציר הזמן, בחלונית ביצועים מפעילים את הגדרות הגדרות הצילום > תיבת סימון נתוני התוסף.

אפשר לנסות את הכלי בדף ההדגמה. מפעילים את האפשרות נתוני התוסף, מתחילים להקליט את הביצועים, לוחצים על הוספת כלב קורג'י חדש בדף הדגמה ומפסיקים את ההקלטה. בכרטיסייה סיכום יופיע מעקב בהתאמה אישית עם מסלול בהתאמה אישית, שכולל אירועים עם הסברים קצרים ופרטים מותאמים אישית.

דוגמאות לקוד

בקטעים הבאים מפורטות דוגמאות לקוד שממחישות איך מוסיפים לציר הזמן של הביצועים את הנתונים הבאים:

• הוספת טראקים ורשומות בהתאמה אישית לציר הזמן
• סימנים לטראק 'תזמונים'

טראקים ורשומות בהתאמה אישית

אפשר ליצור מסלולים מותאמים אישית ולאכלס אותם בערכים כדי להמחיש את נתוני הביצועים במסלול מותאם אישית. לדוגמה:

// 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"
    }
  }
});

התוצאה תהיה הסמן הבא במסלול תזמונים, יחד עם הטקסט והמאפיינים של ההסבר הקצר שלו: