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 toàn diện 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.
• Thử nghiệm: Điền sẵn các kênh bằng các mục nhập đại diện cho sự kiện hoặc hoạt động đo lường.
• Mẹo 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ú thích 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 trên dòng thời gian. Bạn có thể đánh dấu điểm bắt đầu hoặc kết thúc của một hoạt động cụ thể hoặc bất kỳ địa đ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 tiến trình.

• 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 đố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. Nếu đang sử dụng performance.mark làm điểm tham chiếu để tạo performance.measure, thì bạn không cần đưa đối tượng devtools vào lệnh gọi performance.mark.

devtools đối tượng

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ẽ nhìn thấy một bản nhạc tuỳ chỉnh trong dấu vết chứa các sự kiện có chú thích 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:

• Bản nhạc và mục nhập tuỳ chỉnh cho tiến trình
• Điểm đánh dấu cho 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 sẵn các mục nhập để trình bày trực quan dữ liệu hiệu suất của bạn trong kênh tuỳ chỉnh. Ví dụ:

// Mark used to represent the start of an image processing task
performance.mark("Image Processing Start");

// ... later in your code

// Track entry representing the completion of image processing
// with additional details and a tooltip
performance.measure("Image Processing Complete", "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 địa điểm yêu thích cụ thể một cách trực quan trong dòng thời gian bằng các điểm đánh dấu tùy chỉnh trải dài trên tất cả các tuyến đường. 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 của điểm đánh dấu: