סקירה כללית
בחלונית ביצועים יש תמיכה ב-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
}
הצגת הנתונים בציר הזמן
כדי לראות את הנתונים המותאמים אישית בציר הזמן, בחלונית ביצועים מפעילים את הגדרות הצילום > נתוני התוסף.
אפשר לנסות את זה בדף הדגמה הזה. מפעילים את האפשרות נתוני התוסף, מתחילים להקליט את הביצועים, לוחצים על הוספת כלב קורג'י חדש בדף הדגמה ומפסיקים את ההקלטה. בכרטיסייה Summary יופיע טראק מותאם אישית במעקב, שמכיל אירועים עם טיפים מותאמים אישית ופרטים.
דוגמאות לקוד
בקטעים הבאים מפורטות דוגמאות לקוד שממחישות איך מוסיפים לציר הזמן של הביצועים את הנתונים הבאים:
טראקים ורשומות בהתאמה אישית
אתם יכולים ליצור טראקים מותאמים אישית ולאכלס אותם בנתונים כדי להציג את נתוני הביצועים שלכם באופן חזותי בטראק מותאם אישית. לדוגמה:
// 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"
}
}
});
הפעולה הזו יוצרת את הסמן הבא בטראק Timings, יחד עם הטקסט והמאפיינים של תיאור המיקום:
