확장성 API를 통한 실적 데이터 맞춤설정

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

개요

실적 패널은 성능 타임라인에 자체 맞춤 데이터를 추가할 수 있는 성능 확장성 API를 지원합니다.

이 API는 기존 User Timings API를 활용하며 측정값과 이벤트를 맞춤 트랙으로 또는 Timings 트랙으로 성능 타임라인에 직접 삽입할 수 있습니다. 이는 맞춤 계측이 포함된 프레임워크, 라이브러리, 복잡한 애플리케이션의 개발자가 성능을 더 포괄적으로 이해하는 데 유용할 수 있습니다.

주요 특징

  • 맞춤 트랙: 자체 시간 기반 데이터를 시각화할 전용 트랙을 만듭니다.
  • 항목: 이벤트 또는 측정을 나타내는 항목으로 트랙을 채웁니다.
  • 도움말 및 세부정보: 맞춤설정 가능한 도움말과 세부 뷰를 사용하여 항목에 대한 풍부한 맥락을 제공합니다.
  • 마커: 시각적 마커를 사용하여 타임라인의 특정 순간을 강조 표시합니다.

User Timings API로 데이터 삽입

맞춤 데이터를 삽입하려면 performance.mark 및 performance.measure 메서드의 detail 속성 내에 devtools 객체를 포함합니다. 이 devtools 객체의 구조에 따라 실적 패널에 데이터가 표시되는 방식이 결정됩니다.

  • 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
}

타임라인에서 데이터 보기

타임라인에 맞춤 데이터를 표시하려면 실적 패널에서 캡처 설정 > 확장 프로그램 데이터를 사용 설정합니다.

성능 패널의 '캡처 설정'에 있는 '확장 프로그램 데이터' 체크박스

이 데모 페이지에서 사용해 보세요. 확장 프로그램 데이터를 사용 설정하고 실적 녹화를 시작합니다. 그런 다음 데모 페이지에서 새 코기 추가를 클릭하고 녹화를 중지합니다. 트레이스에 맞춤 도움말과 세부정보가 포함된 이벤트가 포함된 맞춤 트랙이 표시되고 요약 탭에 표시됩니다.

코드 예시

다음 섹션에서는 성능 타임라인에 다음을 추가하는 방법을 보여주는 코드 예시를 확인하세요.

맞춤 트랙 및 항목

맞춤 트랙을 만들고 항목으로 채워 맞춤 트랙에서 실적 데이터를 시각화합니다. 예를 들면 다음과 같습니다.

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

그러면 타임라인 트랙에 다음과 같은 마커가 도움말 텍스트 및 속성으로 표시됩니다.

타이밍 트랙의 맞춤 마커