ปรับแต่งข้อมูลประสิทธิภาพด้วย API การขยายการใช้งาน

Andrés Olivares

Sofia Emelianova

ภาพรวม

แผงประสิทธิภาพรองรับ 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
}

ดูข้อมูลในไทม์ไลน์

หากต้องการดูข้อมูลที่กําหนดเองในไทม์ไลน์ ให้เปิดการตั้งค่า การตั้งค่าการบันทึก > check_box ข้อมูลส่วนขยายในแผงประสิทธิภาพ

ลองใช้ในหน้าสาธิตนี้ เปิดข้อมูลชิ้นงาน เริ่มบันทึกประสิทธิภาพ คลิกเพิ่ม 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"
    }
  }
});

ซึ่งจะทำให้เกิดเครื่องหมายต่อไปนี้ในแทร็กเวลา พร้อมกับข้อความและพร็อพเพอร์ตี้ของเคล็ดลับเครื่องมือ