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

Andrés Olivares

Sofia Emelianova

ภาพรวม

แผงประสิทธิภาพรองรับ Performance Extensibility API ซึ่งช่วยให้เพิ่มข้อมูลที่กำหนดเองลงในไทม์ไลน์ประสิทธิภาพได้ ซึ่งจะช่วยให้คุณแทรกการวัดผลและเหตุการณ์ลงในไทม์ไลน์ประสิทธิภาพโดยตรงในแทร็กที่กำหนดเองหรือในแทร็กช่วงเวลา ซึ่งอาจเป็นประโยชน์สําหรับนักพัฒนาเฟรมเวิร์ก ไลบรารี และแอปพลิเคชันที่ซับซ้อนซึ่งมีเครื่องมือวัดประสิทธิภาพที่กําหนดเองเพื่อให้เข้าใจประสิทธิภาพได้ครอบคลุมมากขึ้น

API นี้มีกลไก 2 รูปแบบที่แตกต่างกัน ดังนี้

1. User Timings API (ใช้ performance.mark และ performance.measure)

API นี้ใช้ประโยชน์จาก User Timings API ที่มีอยู่ นอกจากนี้ ยังเพิ่มรายการลงในไทม์ไลน์ประสิทธิภาพภายในของเบราว์เซอร์ ซึ่งช่วยให้วิเคราะห์เพิ่มเติมและผสานรวมกับเครื่องมือด้านประสิทธิภาพอื่นๆ ได้

2. console.timeStamp API (ขยายการให้บริการสำหรับ DevTools)

API นี้ให้วิธีการที่มีประสิทธิภาพสูงสําหรับเครื่องมือวัดแอปพลิเคชันและแสดงข้อมูลการวัดเวลาในแผงประสิทธิภาพใน DevTools โดยเฉพาะ เครื่องมือนี้ออกแบบมาเพื่อลดค่าใช้จ่ายรันไทม์ให้เหลือน้อยที่สุด จึงเหมาะสําหรับเครื่องมือวัดเส้นทางที่ใช้งานบ่อยและบิลด์เวอร์ชันที่ใช้งานจริง แต่จะไม่เพิ่มรายการลงในไทม์ไลน์ประสิทธิภาพภายในของเบราว์เซอร์

ฟีเจอร์หลัก

ทั้ง 2 API มีบริการต่อไปนี้

• แทร็กที่กำหนดเอง: เพิ่มรายการลงในแทร็กที่กำหนดเองและกลุ่มแทร็ก
• รายการ: ป้อนข้อมูลแทร็กด้วยรายการที่แสดงถึงเหตุการณ์หรือการวัด
• การปรับแต่งสี: ใส่รหัสสีให้กับรายการเพื่อแยกความแตกต่างของข้อมูล

ความแตกต่างที่สําคัญและกรณีที่ควรใช้ API แต่ละรายการ

• User Timings API (performance.mark, performance.measure):
  • เพิ่มรายการลงในทั้งแผงประสิทธิภาพ และไทม์ไลน์ประสิทธิภาพภายในของเบราว์เซอร์
  • อนุญาตให้ใช้ข้อมูลที่สมบูรณ์ ซึ่งรวมถึงเคล็ดลับเครื่องมือและพร็อพเพอร์ตี้แบบละเอียด
  • อนุญาตให้เพิ่มเครื่องหมาย: ไฮไลต์ช่วงเวลาที่ต้องการในไทม์ไลน์ด้วยเครื่องหมายภาพ
  • เหมาะสำหรับการวิเคราะห์ประสิทธิภาพโดยละเอียดและเมื่อต้องผสานรวมกับเครื่องมือวัดประสิทธิภาพอื่นๆ
  • ใช้เมื่อจําเป็นต้องจัดเก็บข้อมูลเพิ่มเติมพร้อมกับแต่ละรายการ และเมื่อคุณใช้ User Timings API อยู่แล้ว
• console.timeStamp 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
}

แทรกข้อมูลด้วย console.timeStamp

console.timeStamp API ได้รับการขยายการให้บริการเพื่ออนุญาตให้สร้างรายการการกําหนดเวลาเองในแผงประสิทธิภาพโดยมีค่าใช้จ่ายเพิ่มเติมน้อยที่สุด

console.timeStamp(label: string, start?: string, end?: string, trackName?: string, trackGroup?: string, color?: DevToolsColor);

• label: ป้ายกำกับสำหรับรายการเวลา
• start: ชื่อการประทับเวลาที่บันทึกไว้ก่อนหน้านี้ (โดยใช้ console.timeStamp(timeStampName)) หากไม่ได้ระบุ ระบบจะใช้เวลาปัจจุบัน
• end: ชื่อการประทับเวลาที่บันทึกไว้ก่อนหน้านี้ หากไม่ได้กําหนด ระบบจะใช้เวลาปัจจุบัน
• trackName: ชื่อของแทร็กที่กำหนดเอง
• trackGroup: ชื่อกลุ่มแทร็ก
• color: สีของรายการ

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

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

ลองใช้ในหน้าสาธิตนี้ เปิดข้อมูลชิ้นงาน เริ่มบันทึกประสิทธิภาพ คลิกเพิ่ม Corgi ใหม่ในหน้าเดโม แล้วหยุดการบันทึก คุณจะเห็นแทร็กที่กำหนดเองในการติดตามซึ่งมีเหตุการณ์ที่มีเคล็ดลับเครื่องมือและรายละเอียดที่กำหนดเองในแท็บสรุป

ตัวอย่างโค้ด

ต่อไปนี้คือตัวอย่างวิธีใช้ API เพื่อเพิ่มข้อมูลของคุณเองลงในแผงประสิทธิภาพโดยใช้กลไกที่มีให้แต่ละรายการ

ตัวอย่าง User Timings API

ในส่วนถัดไป ให้ดูตัวอย่างโค้ดที่แสดงวิธีเพิ่มข้อมูลต่อไปนี้ลงในไทม์ไลน์ประสิทธิภาพ

• แทร็กที่กำหนดเองและรายการในไทม์ไลน์
• เครื่องหมายในแทร็กเวลา

แทร็กและคําที่กําหนดเอง

สร้างแทร็กที่กำหนดเองและป้อนข้อมูลลงในแทร็กเพื่อแสดงข้อมูลประสิทธิภาพเป็นภาพในแทร็กที่กำหนดเอง เช่น

// 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"
    }
  }
});

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

console.timeStamp ตัวอย่าง API

// Record a start timestamp
console.timeStamp("start");

// Measure duration from start to now
console.timeStamp("measure 1", "start", undefined, "My Track", "My Group", "primary-light");

// Record an end timestamp
console.timeStamp("end");

// Measure duration from start to end
console.timeStamp("measure 2", "start", "end", "My Track", "My Group", "secondary-dark");

การดำเนินการนี้ส่งผลให้มีรายการแทร็กที่กำหนดเองดังต่อไปนี้ในไทม์ไลน์ประสิทธิภาพ