Tuỳ chỉnh dữ liệu hiệu suất bằng API khả năng mở rộng

Andrés Olivares

Sofia Emelianova

Tổng quan

Bảng điều khiển Hiệu suất hỗ trợ API mở rộng hiệu suất, cho phép bạn thêm dữ liệu tuỳ chỉnh của riêng mình vào tiến trình hiệu suất.

API này tận dụng User Timings API (API Thời gian của người dùng) hiện có và cho phép bạn chèn các phép đo và sự kiện trực tiếp vào tiến trình hiệu suất dưới dạng một kênh tuỳ chỉnh hoặc trong kênh Timings (Thời gian). Điều này có thể hữu ích cho các nhà phát triển khung, thư viện và ứng dụng phức tạp có khả năng đo lường tuỳ chỉnh để hiểu rõ hơn về hiệu suất.

Tính năng chính

• Bản nhạc tuỳ chỉnh: Tạo các bản nhạc chuyên biệt để trực quan hoá dữ liệu dựa trên thời gian của riêng bạn.
• Mục nhập: Điền các mục nhập đại diện cho sự kiện hoặc phép đo vào kênh.
• Chú giải công cụ và thông tin chi tiết: Cung cấp bối cảnh phong phú cho các mục nhập bằng chú giải công cụ có thể tuỳ chỉnh và chế độ xem chi tiết.
• Điểm đánh dấu: Làm nổi bật các khoảnh khắc cụ thể trong dòng thời gian bằng điểm đánh dấu trực quan.

Chèn dữ liệu bằng API User Timings

Để chèn dữ liệu tuỳ chỉnh, hãy đưa đối tượng devtools vào thuộc tính detail của các phương thức performance.mark và performance.measure. Cấu trúc của đối tượng devtools này xác định cách dữ liệu của bạn hiển thị trong bảng điều khiển Hiệu suất.

• Sử dụng performance.mark để ghi lại một sự kiện tức thì hoặc dấu thời gian trong dòng thời gian. Bạn có thể đánh dấu điểm bắt đầu hoặc điểm kết thúc của một thao tác cụ thể hoặc bất kỳ điểm yêu thích nào không có thời lượng. Khi bạn đưa một đối tượng devtools vào thuộc tính detail, bảng điều khiển Hiệu suất sẽ hiển thị một điểm đánh dấu tuỳ chỉnh trong kênh Thời gian.

• Sử dụng performance.measure để đo thời lượng của một tác vụ hoặc quy trình. Khi bạn đưa một đối tượng devtools vào thuộc tính detail, bảng điều khiển Hiệu suất sẽ hiển thị các mục đo lường tuỳ chỉnh trong tiến trình của một kênh tuỳ chỉnh. Nếu đang sử dụng performance.mark làm điểm tham chiếu để tạo performance.measure, bạn không cần đưa đối tượng devtools vào các lệnh gọi performance.mark.

Đối tượng devtools

Các loại này xác định cấu trúc của đối tượng devtools cho các tính năng tiện ích khác nhau:

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
}

Xem dữ liệu của bạn trong dòng thời gian

Để xem dữ liệu tuỳ chỉnh trong tiến trình, trong bảng điều khiển Hiệu suất, hãy bật settings Capture settings (Cài đặt tính năng ghi) > check_box Extension data (Dữ liệu tiện ích).

Hãy thử trên trang minh hoạ này. Bật Dữ liệu tiện ích, bắt đầu ghi lại hiệu suất, nhấp vào Thêm Corgi mới trên trang minh hoạ, sau đó dừng ghi. Bạn sẽ thấy một kênh tuỳ chỉnh trong dấu vết chứa các sự kiện có chú giải công cụ tuỳ chỉnh và thông tin chi tiết trong thẻ Tóm tắt.

Ví dụ về mã

Trong các phần tiếp theo, hãy xem các ví dụ về mã minh hoạ cách thêm những nội dung sau vào tiến trình hiệu suất:

• Các kênh và mục nhập tuỳ chỉnh vào tiến trình
• Các điểm đánh dấu đến kênh Thời gian

Bản nhạc và mục nhập tuỳ chỉnh

Tạo kênh tuỳ chỉnh và điền các mục vào kênh đó để trực quan hoá dữ liệu hiệu suất trong kênh tuỳ chỉnh. Ví dụ:

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

Thao tác này sẽ tạo mục theo dõi tuỳ chỉnh sau trong tiến trình hiệu suất, cùng với văn bản chú giải công cụ và các thuộc tính của mục đó:

Điểm đánh dấu

Làm nổi bật các điểm cụ thể trong dòng thời gian bằng các điểm đánh dấu tuỳ chỉnh trên tất cả các kênh. Ví dụ:

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

Thao tác này sẽ tạo ra điểm đánh dấu sau trong kênh Timings (Thời gian), cùng với văn bản chú giải công cụ và các thuộc tính: