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

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

개요

성능 패널은 성능 확장성 API를 지원하므로 성능 타임라인에 맞춤 데이터를 추가할 수 있습니다. 이렇게 하면 측정값과 이벤트를 맞춤 트랙으로 또는 타이밍 트랙으로 실적 타임라인에 직접 삽입할 수 있습니다. 이는 맞춤 계측이 포함된 프레임워크, 라이브러리, 복잡한 애플리케이션의 개발자가 성능을 더 포괄적으로 이해하는 데 유용할 수 있습니다.

이 API는 다음과 같은 두 가지 고유한 메커니즘을 제공합니다.

1. User Timings API (performance.mark 및 performance.measure 사용)

이 API는 기존 User Timings API를 활용합니다. 또한 브라우저의 내부 성능 타임라인에 항목을 추가하여 다른 성능 도구와 함께 추가 분석 및 통합할 수 있습니다.

2. console.timeStamp API (DevTools용으로 확장됨)

이 API는 애플리케이션을 계측하고 DevTools의 성능 패널에만 타이밍 데이터를 표시하는 고성능 메서드를 제공합니다. 런타임 오버헤드를 최소화하도록 설계되어 핫 패스 및 프로덕션 빌드 계측에 적합합니다. 브라우저의 내부 성능 타임라인에 항목을 추가하지 않습니다.

주요 특징

두 API 모두 다음을 제공합니다.

  • 맞춤 트랙: 맞춤 트랙 및 트랙 그룹에 항목을 추가합니다.
  • 항목: 이벤트 또는 측정을 나타내는 항목으로 트랙을 채웁니다.
  • 색상 맞춤설정: 시각적 구분을 위해 항목에 색상 코드를 지정합니다.

주요 차이점 및 각 API를 사용하는 경우:

  • User Timings API (performance.mark, performance.measure):
    • 성능 패널 및 브라우저의 내부 성능 타임라인에 항목을 추가합니다.
    • 도움말 및 세부 속성을 비롯한 풍부한 데이터를 허용합니다.
    • 마커 추가: 시각적 마커로 타임라인의 특정 순간을 강조 표시합니다.
    • 세부적인 성능 분석 및 다른 성능 도구와의 통합이 필요한 경우에 적합합니다.
    • 각 항목과 함께 추가 데이터를 저장해야 하거나 이미 User Timings API를 사용 중인 경우에 사용합니다.
  • console.timeStamp API:
    • 성능 패널에 항목만 추가합니다.
    • 특히 프로덕션 환경에서 훨씬 우수한 성능을 제공합니다.
    • 핫 패스 및 성능이 중요한 코드를 계측하는 데 적합합니다.
    • 도움말이나 속성과 같은 추가 데이터는 추가할 수 없습니다.
    • 성능 오버헤드가 주요 문제이고 코드를 빠르게 계측해야 하는 경우에 사용합니다.

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
}

console.timeStamp로 데이터 삽입

console.timeStamp API가 확장되어 최소 오버헤드로 성능 패널에 맞춤 타이밍 항목을 만들 수 있습니다.

console.timeStamp(label: string, start?: string, end?: string, trackName?: string, trackGroup?: string, color?: DevToolsColor);
  • label: 타이밍 항목의 라벨입니다.
  • start: 이전에 기록된 타임스탬프의 이름입니다 (console.timeStamp(timeStampName) 사용). 정의되지 않으면 현재 시간이 사용됩니다.
  • end: 이전에 기록된 타임스탬프의 이름입니다. 정의되지 않으면 현재 시간이 사용됩니다.
  • trackName: 커스텀 트랙의 이름입니다.
  • trackGroup: 트랙 그룹의 이름입니다.
  • color: 항목의 색상입니다.

타임라인에서 데이터 보기

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

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

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

코드 예시

다음은 API를 사용하여 사용 가능한 각 메커니즘을 통해 실적 패널에 자체 데이터를 추가하는 방법의 몇 가지 예입니다.

User Timings API 예시:

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

맞춤 트랙 및 항목

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

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

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

타이밍 트랙의 맞춤 마커

console.timeStamp API 예시:

// Record a start timestamp
console.timeStamp("start");

// Measure duration from start to now
console.timeStamp("measure 1", "start", undefined, "My Track", "My Group", "primary-light");

// Record an end timestamp
console.timeStamp("end");

// Measure duration from start to end
console.timeStamp("measure 2", "start", "end", "My Track", "My Group", "secondary-dark");

이렇게 하면 실적 타임라인에 다음과 같은 맞춤 트랙 항목이 생성됩니다.

console.timeStamp API를 사용하여 맞춤 항목이 추가된 맞춤 트랙입니다.