Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

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ạn muốn có thông tin chi tiết chuyên sâu hơn về hiệu suất của ứng dụng ngoài các chỉ số tích hợp sẵn của trình duyệt? Bảng điều khiển Hiệu suất hiện cho phép bạn đưa dữ liệu hiệu suất của riêng mình trực tiếp vào dòng thời gian. Cho dù bạn là tác giả khung cần trực quan hoá các quy trình nội bộ, nhà phát triển thư viện theo dõi tác động của mã hay đang xây dựng một ứng dụng phức tạp bằng khả năng đo lường tuỳ chỉnh, thì API khả năng mở rộng hiệu suất đều cung cấp các công cụ để bạn hiểu rõ toàn diện về những gì đang diễn ra trong hệ thống.

Bằng cách chèn các sự kiện và chỉ số đo lường tuỳ chỉnh, bạn có thể tạo hình ảnh trực quan phù hợp trong bảng điều khiển Hiệu suất quen thuộc. Hãy tưởng tượng bạn thấy các sự kiện trong vòng đời thành phần của khung cùng với các chỉ số hiệu suất tiêu chuẩn của trình duyệt, hoặc theo dõi quy trình thực thi của công cụ hiển thị tùy chỉnh một cách hoàn toàn đồng bộ với pipeline kết xuất của trình duyệt.

API này cung cấp hai phương pháp để đạt được điều này:

1. console.timeStamp API (mở rộng cho Công cụ cho nhà phát triển)

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

2. API Thời gian 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ó. API này cũng thêm các mục vào dòng thời gian hiệu suất nội bộ của trình duyệt, cho phép phân tích thêm và tích hợp với các công cụ hiệu suất khác.

Ví dụ về giao diện của các bản nhạc tuỳ chỉnh trong bảng điều khiển Hiệu suất.

Lợi ích chính

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

Dấu vết tuỳ chỉnh: Thêm các dấu vết và nhóm dấu vết chuyên dụng để thể hiện các khía cạnh hiệu suất riêng biệt của mã.
Mục nhập: Điền vào các bản nhạc này những mục nhập đánh dấu rõ ràng các sự kiện quan trọng hoặc thời lượng của thao tác cụ thể.
Tuỳ chỉnh màu sắc: Sử dụng mã màu để phân biệt trực quan các loại sự kiện hoặc phép đo khác nhau trong nháy mắt.

Chọn API phù hợp với nhu cầu của bạn:

console.timeStamp API:
- Tác động của hoạt động đo lường đến hiệu suất là mối lo ngại chính, đặc biệt là trong các bản dựng phát hành công khai.
- Bạn cần một cách nhanh chóng và hiệu quả để đánh dấu thời lượng hoặc sự kiện mà không cần thêm siêu dữ liệu.
- Bạn chỉ cần dữ liệu được trực quan hoá trong bảng điều khiển Hiệu suất.
User Timings API (performance.mark, performance.measure):
- Sử dụng khi bạn cần lưu trữ thêm dữ liệu cho mỗi mục nhập và khi bạn đang sử dụng API Thời gian người dùng.
- Bạn cần liên kết dữ liệu đa dạng thức (chú giải công cụ, thuộc tính chi tiết) với các mục hiệu suất.
- Bạn muốn thêm các điểm đánh dấu trực quan để làm nổi bật những khoảnh khắc cụ thể.
- Bạn cần dữ liệu không chỉ có trong Công cụ cho nhà phát triển mà còn trong dòng thời gian hiệu suất nội bộ của trình duyệt để phân tích rộng hơn hoặc các công cụ khác.
- Bạn đã quen thuộc hoặc đang sử dụng User Timings API.

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 nhập thời gian tuỳ chỉnh trong bảng Hiệu suất với mức hao tổn tối thiểu, đặc biệt là khi Công cụ cho nhà phát triển không ghi lại dấu vết.

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

label:

Nhãn cho mục thời gian.
start (không bắt buộc):
- Nếu được xác định là chuỗi: tên của dấu thời gian đã ghi lại trước đó (sử dụng console.timeStamp(timeStampName)).
- Nếu được xác định là số: dấu thời gian tính bằng mili giây tương ứng với Performance.timeOrigin (ví dụ: được lấy bằng performance.now()) đại diện cho thời gian bắt đầu của mục thời gian.
- Nếu không xác định, thời gian hiện tại sẽ được dùng làm thời gian bắt đầu.
end:
- Nếu được xác định là chuỗi: Tên của dấu thời gian đã ghi lại trước đó.
- Nếu được xác định là số: dấu thời gian tính bằng mili giây tương ứng với Performance.timeOrigin (ví dụ: được lấy bằng performance.now()) thể hiện thời gian kết thúc của mục thời gian.
- Nếu không xác định, thời gian hiện tại sẽ được dùng làm thời gian kết thúc.
trackName:

Tên của phụ đề tuỳ chỉnh.
trackGroup:

Tên của nhóm bản nhạc.
color:

Màu của mục nhập.

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

Để chèn dữ liệu tuỳ chỉnh, hãy thêm đối tượng devtools vào thuộc tính detail của 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 quan tâm nào không có thời lượng. Khi bạn thêm một đối tượng devtools vào thuộc tính detail, bảng Performance (Hiệu suất) sẽ cho thấy một điểm đánh dấu tuỳ chỉnh trong bản Timings (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 đố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 dòng thời gian trong 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, thì 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 nhiều tính năng của tiện ích:

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 dòng thời gian, trong bảng điều khiển Performance (Hiệu suất), hãy đảm bảo chế độ cài đặt đang bật: Capture settings (Chế độ cài đặt chụp) > Show custom tracks (Hiện các dấu vết tuỳ chỉnh).

Hộp đánh dấu "Hiện bản nhạc tuỳ chỉnh" trong phần "Cài đặt chụp" của bảng điều khiển Hiệu suất.

Hãy thử trên trang minh hoạ này. Bắt đầu ghi lại hiệu suất, nhấp vào Add new Corgi (Thêm Corgi mới) trên trang minh hoạ, sau đó dừng ghi. Bạn sẽ thấy một bản theo dõi 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, thông tin chi tiết trong thẻ Summary (Tóm tắt) và thông tin tóm tắt về nhóm bản theo dõi tuỳ chỉnh trong phần tóm tắt dấu vết.

Ví dụ về mã

Dưới đây là một vài 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 `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");

Thao tác này sẽ tạo ra mục nhập bản nhạc tuỳ chỉnh sau đây trong dòng thời gian hiệu suất:

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

Ví dụ về API Thời gian 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 thông tin sau vào tiến trình hiệu suất:

Thêm các bản phụ đề và mục tuỳ chỉnh vào dòng thời gian
Các điểm đánh dấu cho bản ghi Thời gian

Các mục và kênh tuỳ chỉnh

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

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

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

Một bản nhạc tuỳ chỉnh trong dòng thời gian hiệu suất.

Điểm đánh dấu

Làm nổi bật trực quan những điểm quan tâm cụ thể trong dòng thời gian bằng các điểm đánh dấu tuỳ chỉnh trải dài trên tất cả các bản nhạc. 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 đây trong kênh Timings (Thời gian), cùng với văn bản và thuộc tính của chú giải công cụ:

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

Tuỳ chỉnh dữ liệu hiệu suất bằng API khả năng mở rộng Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.