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
- Kênh tuỳ chỉnh: Tạo các kênh chuyên biệt để trình bày trực quan 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 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 của bạn bằng API Thời gian người dùng
Để chèn dữ liệu tuỳ chỉnh, hãy đưa đố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 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 lường thời lượng của một nhiệm 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 dòng thời gian theo 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 Hiệu suất, hãy bật tuỳ chọn
Cài đặt ghi lại > Dữ liệu về 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 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ú 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 ví dụ về mã trình bày cách thêm 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 đị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: