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

Andrés Olivares
Andrés Olivares
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

ภาพรวม

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

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

API นี้มี 2 แนวทางในการดำเนินการดังกล่าว ดังนี้

1. API console.timeStamp (ขยายสำหรับ DevTools)

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

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

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

ตัวอย่างลักษณะของแทร็กที่กำหนดเองในแผงประสิทธิภาพ

ประโยชน์สำคัญ

API ทั้ง 2 รายการมีฟีเจอร์ต่อไปนี้

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

การเลือก API ที่เหมาะสมกับความต้องการของคุณ:

  • API console.timeStamp:

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

  • User Timings API (performance.mark, performance.measure):

    • ใช้เมื่อคุณต้องการจัดเก็บข้อมูลเพิ่มเติมกับแต่ละรายการ และเมื่อคุณใช้ User Timings API อยู่แล้ว
    • คุณต้องเชื่อมโยงข้อมูลแบบสมบูรณ์ (เคล็ดลับเครื่องมือ, พร็อพเพอร์ตี้โดยละเอียด) กับรายการประสิทธิภาพ
    • คุณต้องการเพิ่มเครื่องหมายภาพเพื่อไฮไลต์ช่วงเวลาที่เฉพาะเจาะจง
    • คุณต้องการให้ข้อมูลพร้อมใช้งานไม่เพียงแต่ใน DevTools แต่ยังอยู่ในไทม์ไลน์ประสิทธิภาพภายในของเบราว์เซอร์สำหรับการวิเคราะห์ที่กว้างขึ้นหรือเครื่องมืออื่นๆ
    • คุณคุ้นเคยหรือใช้ User Timings API อยู่แล้ว

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

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

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

  • label:

    ป้ายกำกับสำหรับรายการการจับเวลา

  • start (ไม่บังคับ):

    • หากกำหนดเป็นสตริง: ชื่อของการประทับเวลาที่บันทึกไว้ก่อนหน้านี้ (ใช้ console.timeStamp(timeStampName))

    • หากกำหนดเป็นตัวเลข: การประทับเวลาเป็นมิลลิวินาทีที่สัมพันธ์กับ Performance.timeOrigin (เช่น ใช้ performance.now()) ซึ่งแสดงถึงเวลาเริ่มต้นของรายการการจับเวลา

    • หากไม่ได้กำหนดไว้ ระบบจะใช้เวลาปัจจุบันเป็นเวลาเริ่มต้น

  • end:

    • หากกำหนดเป็นสตริง: ชื่อของการประทับเวลาที่บันทึกไว้ก่อนหน้านี้

    • หากกำหนดเป็นตัวเลข: การประทับเวลาเป็นมิลลิวินาทีที่สัมพันธ์กับ Performance.timeOrigin (เช่น ใช้ performance.now()) ซึ่งแสดงถึงเวลาสิ้นสุดของรายการการจับเวลา

    • หากไม่ได้กำหนดไว้ ระบบจะใช้เวลาปัจจุบันเป็นเวลาสิ้นสุด

  • trackName:

    ชื่อของแทร็กที่กำหนดเอง

  • trackGroup:

    ชื่อของกลุ่มแทร็ก

  • color:

    สีของรายการ

แทรกข้อมูลด้วย 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
}

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

หากต้องการดูข้อมูลที่กำหนดเองในไทม์ไลน์ ให้ตรวจสอบว่าได้เปิดการตั้งค่าต่อไปนี้ในแผงประสิทธิภาพ แล้ว: Capture settings > Show custom tracks

ช่องทําเครื่องหมาย "แสดงเส้นทางที่กําหนดเอง" ใน "การตั้งค่าการบันทึก" ของแผงประสิทธิภาพ

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

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

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

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

// Take a start timestamp
const start = performance.now();

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

// Take an end timestamp
const end = performance.now();

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

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

แทร็กที่กำหนดเองพร้อมรายการที่กำหนดเองซึ่งเพิ่มด้วย API console.timeStamp

ตัวอย่าง User Timings API

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

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

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

// Mark used to represent the start of the image processing task
// The start time is defaulted to now
const imageProcessinTimeStart = performance.now();

// ... 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: imageProcessinTimeStart,
  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"
    }
  }
});

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

เครื่องหมายที่กำหนดเองในแทร็กการจับเวลา