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

Andrés Olivares

Sofia Emelianova

סקירה כללית

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

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

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

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

החדרת הנתונים עם 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
}

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

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

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

דוגמאות לקוד

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

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

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

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

// Mark used to represent the start of an image processing task
performance.mark("Image Processing Start");

// ... later in your code

// Track entry representing the completion of image processing
// with additional details and a tooltip
performance.measure("Image Processing Complete", "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"
    }
  }
});

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