개요
실적 패널은 성능 타임라인에 자체 맞춤 데이터를 추가할 수 있는 성능 확장성 API를 지원합니다.
이 API는 기존의 User Timings API를 활용하여 측정 및 이벤트를 실적 타임라인에 맞춤 트랙으로 직접 삽입하거나 타이밍 트랙에 삽입할 수 있습니다. 이는 커스텀 계측을 사용하는 프레임워크, 라이브러리 및 복잡한 애플리케이션 개발자가 성능을 보다 포괄적으로 이해하는 데 유용할 수 있습니다.
주요 특징
- 맞춤 트랙: 자체 시간 기반 데이터를 시각화할 전용 트랙을 만듭니다.
- 항목: 이벤트 또는 측정을 나타내는 항목으로 트랙을 채웁니다.
- 도움말 및 세부정보: 맞춤설정 가능한 도움말 및 세부정보 보기를 통해 항목에 대한 풍부한 컨텍스트를 제공합니다.
- 마커: 시각적 마커를 사용하여 타임라인의 특정 순간을 강조 표시합니다.
User Timings API를 사용하여 데이터 삽입
맞춤 데이터를 삽입하려면 performance.mark 및 performance.measure 메서드의 detail 속성 내에 devtools 객체를 포함합니다. 이 devtools 객체의 구조는 데이터가 Performance 패널에 표시되는 방식을 결정합니다.
performance.mark를 사용하여 타임라인에 즉시 이벤트 또는 타임스탬프를 기록합니다. 기간이 없는 특정 작업이나 관심 장소의 시작이나 끝을 표시할 수 있습니다.detail속성 내에devtools객체를 포함하면 실적 패널의 타이밍 트랙에 맞춤 마커가 표시됩니다.performance.measure를 사용하여 작업 또는 프로세스의 시간을 측정합니다.detail속성 내에devtools객체를 포함하면 실적 패널의 맞춤 트랙 타임라인에 맞춤 측정 항목이 표시됩니다.performance.mark를 참조점으로 사용하여performance.measure를 만드는 경우performance.mark호출에devtools객체를 포함할 필요가 없습니다.
devtools 객체
이러한 유형은 다양한 확장 프로그램 기능에 관한 devtools 객체의 구조를 정의합니다.
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
}
타임라인에서 데이터 보기
타임라인에 맞춤 데이터를 표시하려면 실적 패널에서 캡처 설정 > 확장 프로그램 데이터를 사용 설정합니다.
이 데모 페이지에서 사용해 보세요. 확장 프로그램 데이터를 사용 설정하고, 녹음을 시작하고, 데모 페이지에서 새 Corgi 추가를 클릭한 다음 녹화를 중지합니다. 트레이스에 맞춤 도움말과 세부정보가 포함된 이벤트가 포함된 맞춤 트랙이 표시되고 요약 탭에 표시됩니다.
코드 예시
다음 섹션에서 성능 타임라인에 다음을 추가하는 방법을 보여주는 코드 예를 참고하세요.
맞춤 트랙 및 항목
맞춤 트랙을 만들고 항목으로 채워 맞춤 트랙에서 실적 데이터를 시각화합니다. 예를 들면 다음과 같습니다.
// 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"
}
}
});
이렇게 하면 도움말 텍스트 및 속성과 함께 실적 타임라인에 다음과 같은 맞춤 트랙 항목이 생성됩니다.
마커
모든 트랙에 걸쳐 맞춤 마커로 타임라인의 특정 관심 장소를 시각적으로 강조할 수 있습니다. 예를 들면 다음과 같습니다.
// 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"
}
}
});
이렇게 하면 타임라인 트랙에 도움말 텍스트와 속성, 다음과 같은 마커가 표시됩니다.
