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

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

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 thêm dữ liệu tuỳ chỉnh vào tiến trình Hiệu suất. Điều này cho phép bạn chèn trực tiếp các phép đo và sự kiện vào dòng thời gian 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.

API này cung cấp hai cơ chế riêng biệt:

1. API Thời gian của người dùng (sử dụng performance.mark và performance.measure)

API này tận dụng User Timings API hiện có. Công cụ này cũng thêm các mục vào tiến trình hiệu suất nội bộ của trình duyệt, cho phép phân tích và tích hợp thêm với các công cụ hiệu suất khác.

2. API console.timeStamp (mở rộng cho DevTools)

API này cung cấp một phương thức hiệu suất cao để đo lường các ứng dụng và hiển thị dữ liệu thời gian chỉ dành cho bảng điều khiển Hiệu suất trong DevTools. Công cụ này được thiết kế để giảm thiểu hao tổn thời gian chạy, giúp phù hợp với việc đo lường các đường dẫn nóng và bản dựng chính thức. Phương thức này không thêm các mục vào tiến trình hiệu suất nội bộ của trình duyệt.

Tính năng chính

Cả hai API đều cung cấp:

  • Kênh tuỳ chỉnh: Thêm mục vào kênh tuỳ chỉnh và nhóm kênh.
  • 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.
  • Tuỳ chỉnh màu: Mục nhập mã màu để phân biệt hình ảnh.

Những điểm khác biệt chính và thời điểm sử dụng từng API:

  • User Timings API (performance.mark, performance.measure):
    • Thêm các mục vào cả bảng điều khiển Hiệu suất và tiến trình hiệu suất nội bộ của trình duyệt.
    • Cho phép dữ liệu đa dạng thức, bao gồm cả chú giải công cụ và các thuộc tính chi tiết.
    • Cho phép thêm điểm đánh dấu: Làm nổi bật những khoảnh khắc cụ thể trong dòng thời gian bằng điểm đánh dấu hình ảnh.
    • Phù hợp để phân tích hiệu suất chi tiết và khi cần tích hợp với các công cụ hiệu suất khác.
    • Sử dụng khi bạn cần lưu trữ dữ liệu bổ sung với mỗi mục nhập và khi bạn đang sử dụng API User Timings.
  • console.timeStamp API:
    • Chỉ thêm các mục vào bảng điều khiển Hiệu suất.
    • Cung cấp hiệu suất cao hơn đáng kể, đặc biệt là trong môi trường sản xuất.
    • Lý tưởng để đo lường các đường dẫn nóng và mã quan trọng về hiệu suất.
    • Bạn không thể thêm dữ liệu bổ sung như chú giải công cụ hoặc thuộc tính.
    • Sử dụng khi chi phí hiệu suất là mối lo ngại chính và bạn cần nhanh chóng đo lường mã.

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
}

Chèn dữ liệu bằng console.timeStamp

API console.timeStamp được mở rộng để cho phép tạo các mục thời gian tuỳ chỉnh trong bảng điều khiển Hiệu suất với mức hao tổn tối thiểu.

console.timeStamp(label: string, start?: string, end?: string, trackName?: string, trackGroup?: string, color?: DevToolsColor);
  • label: Nhãn cho mục nhập thời gian.
  • start: Tên của dấu thời gian đã ghi trước đó (sử dụng console.timeStamp(timeStampName)). Nếu không xác định, thời gian hiện tại sẽ được sử dụng.
  • end: Tên của dấu thời gian đã ghi trước đó. Nếu không xác định, hệ thống sẽ sử dụng thời gian hiện tại.
  • trackName: Tên của kênh tuỳ chỉnh.
  • trackGroup: Tên của nhóm kênh.
  • color: Màu của mục nhập.

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 Capture settings (Cài đặt tính năng ghi) > Extension data (Dữ liệu tiện ích).

Hộp đánh dấu "Dữ liệu tiện ích" trong phần "Cài đặt tính năng ghi" của bảng điều khiển Hiệu suất.

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ã

Dưới đây là một số ví dụ về cách sử dụng API để thêm dữ liệu của riêng bạn vào bảng điều khiển Hiệu suất bằng từng cơ chế có sẵn.

Ví dụ về API Thời gian của người dùng:

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:

Kênh 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 đó:

Một kênh tuỳ chỉnh trong dòng thời gian hiệu suất.

Điểm đánh dấu

Làm nổi bật các điểm quan tâm cụ thể trong tiến trình 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:

Một điểm đánh dấu tuỳ chỉnh trong kênh Thời gian.

Ví dụ về API console.timeStamp:

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

Điều này dẫn đến mục nhập kênh tuỳ chỉnh sau trong tiến trình hiệu suất:

Một bản nhạc tuỳ chỉnh có các mục nhập tuỳ chỉnh được thêm bằng API console.timeStamp.