ภาพรวม
แผงประสิทธิภาพรองรับ Performance Extensibility 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
}
ดูข้อมูลในไทม์ไลน์
หากต้องการดูข้อมูลที่กําหนดเองในไทม์ไลน์ ให้เปิด การตั้งค่าการบันทึก > ข้อมูลส่วนขยายในแผงประสิทธิภาพ
ลองใช้ในหน้าสาธิตนี้ เปิดข้อมูลชิ้นงาน เริ่มบันทึกประสิทธิภาพ คลิกเพิ่ม Corgi ใหม่ในหน้าเดโม แล้วหยุดการบันทึก คุณจะเห็นแทร็กที่กำหนดเองในการติดตามซึ่งมีเหตุการณ์ที่มีเคล็ดลับเครื่องมือและรายละเอียดที่กำหนดเองในแท็บสรุป
ตัวอย่างโค้ด
ดูตัวอย่างโค้ดที่แสดงวิธีเพิ่มสิ่งต่อไปนี้ลงในไทม์ไลน์ประสิทธิภาพในส่วนถัดไป
แทร็กและรายการที่กำหนดเอง
สร้างแทร็กที่กำหนดเองและป้อนข้อมูลลงในแทร็กเพื่อแสดงข้อมูลประสิทธิภาพเป็นภาพในแทร็กที่กำหนดเอง เช่น
// 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"
}
}
});
การดำเนินการนี้จะส่งผลให้เกิดเครื่องหมายต่อไปนี้ในการติดตามการจับเวลา รวมถึงข้อความและพร็อพเพอร์ตี้ของเคล็ดลับเครื่องมือ
