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.
- 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.
- Chú giải công cụ và thông tin chi tiết: Cung cấp ngữ 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 những khoảnh khắc cụ thể trong dòng thời gian bằng các đ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 đối tượngdevtools
vào thuộc tínhdetail
, 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ượngdevtools
vào thuộc tínhdetail
, 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ụngperformance.mark
làm điểm tham chiếu để tạoperformance.measure
, bạn không cần đưa đối tượngdevtools
vào các lệnh gọiperformance.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
Capture settings (Cài đặt tính năng ghi) > Extension data (Dữ liệu tiện ích).Hãy thử tính năng này trên trang minh hoạ. Bật Dữ liệu tiện ích, bắt đầu ghi hiệu suất, nhấp vào Thêm Corgi mới trên trang minh hoạ rồi 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:
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 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"
}
}
});
Việc này dẫn đến mục theo dõi tuỳ chỉnh sau đây trong tiến trình hiệu suất, cùng với văn bản chú giải công cụ và thuộc tính tương ứng:
Đ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"
}
}
});
Do đó, điểm đánh dấu sau đây trong kênh Thời gian, cùng với văn bản chú giải công cụ và thuộc tính của điểm đánh dấu đó: