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