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

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

개요

브라우저의 기본 제공 측정항목 외에 애플리케이션의 성능에 관한 더 심층적인 유용한 정보를 확인하고 싶으신가요? 이제 성능 패널을 사용하면 자체 성능 데이터를 타임라인으로 직접 가져올 수 있습니다. 내부 프로세스를 시각화해야 하는 프레임워크 작성자, 코드의 영향을 추적하는 라이브러리 개발자 또는 맞춤 계측으로 복잡한 애플리케이션을 빌드하는 경우 성능 확장성 API는 내부에서 발생하는 상황을 포괄적으로 이해하는 데 필요한 도구를 제공합니다.

맞춤 측정항목과 이벤트를 삽입하면 익숙한 성능 패널 내에서 맞춤 시각화를 만들 수 있습니다. 표준 브라우저 실적 측정항목과 함께 프레임워크의 구성요소 수명 주기 이벤트를 보거나 브라우저의 렌더링 파이프라인과 완벽하게 동기화된 맞춤 렌더링 엔진의 실행 흐름을 추적한다고 가정해 보겠습니다.

이 API는 이를 달성하기 위한 두 가지 접근 방식을 제공합니다.

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

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

2. 사용자 시간 API (performance.mark 및 performance.measure 사용)

이 API는 기존 사용자 시간 API를 활용합니다. 또한 브라우저의 내부 성능 타임라인에 항목을 추가하여 다른 성능 도구와의 추가 분석 및 통합을 허용합니다.

맞춤 트랙이 실적 패널에 표시되는 방식의 예

주요 이점

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

  • 맞춤 트랙: 전용 트랙과 트랙 그룹을 추가하여 코드의 고유한 성능 측면을 나타냅니다.
  • 항목: 중요한 이벤트 또는 특정 작업의 기간을 명확하게 표시하는 항목으로 이러한 트랙을 채웁니다.
  • 색상 맞춤설정: 색상 코딩을 사용하여 다양한 유형의 이벤트 또는 측정항목을 한눈에 시각적으로 구분합니다.

필요에 맞는 API 선택:

  • console.timeStamp API:

    • 계측의 성능 영향은 특히 프로덕션 빌드에서 주요 관심사입니다.
    • 추가 메타데이터 없이 기간 또는 이벤트를 표시하는 빠르고 효율적인 방법이 필요합니다.
    • 성능 패널 내에서 데이터를 시각화하기만 하면 됩니다.

  • 사용자 시간 API (performance.mark, performance.measure):

    • 각 항목에 추가 데이터를 저장해야 하고 사용자 시간 API를 이미 사용 중인 경우에 사용합니다.
    • 성능 항목과 풍부한 데이터 (도구 설명, 세부 속성)를 연결해야 합니다.
    • 특정 순간을 강조표시하는 시각적 마커를 추가하려고 합니다.
    • DevTools뿐만 아니라 광범위한 분석 또는 기타 도구를 위해 브라우저의 내부 성능 타임라인에서도 데이터를 사용할 수 있어야 합니다.
    • 사용자 시간 API를 이미 잘 알고 있거나 사용 중입니다.

console.timeStamp로 데이터 삽입

console.timeStamp API는 특히 DevTools에서 트레이스를 기록하지 않을 때 최소한의 오버헤드로 성능 패널에서 맞춤 타이밍 항목을 만들 수 있도록 확장됩니다.

console.timeStamp(label: string, start?: string|number, end?: string|number, trackName?: string, trackGroup?: string, color?: DevToolsColor);

  • label:

    타이밍 항목의 라벨입니다.

  • start (선택사항):

    • 문자열로 정의된 경우: 이전에 기록된 타임스탬프의 이름 (console.timeStamp(timeStampName) 사용).

    • 숫자로 정의된 경우: 타이밍 항목의 시작 시간을 나타내는 Performance.timeOrigin을 기준으로 하는 밀리초 단위의 타임스탬프 (예: performance.now()로 가져옴).

    • 정의되지 않은 경우 현재 시간이 시작 시간으로 사용됩니다.

  • end:

    • 문자열로 정의된 경우: 이전에 기록된 타임스탬프의 이름입니다.

    • 숫자로 정의된 경우: 타이밍 항목의 종료 시간을 나타내는 Performance.timeOrigin을 기준으로 하는 밀리초 단위의 타임스탬프 (예: performance.now()로 가져옴).

    • 정의되지 않은 경우 현재 시간이 종료 시간으로 사용됩니다.

  • trackName:

    맞춤 트랙의 이름입니다.

  • trackGroup:

    트랙 그룹의 이름입니다.

  • color:

    항목의 색상입니다.

사용자 시간 API로 데이터 삽입

맞춤 데이터를 삽입하려면 devtools 객체를 detail 속성 내에 performance.mark 및 performance.measure 메서드를 포함합니다. 이 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
}

타임라인에서 데이터 보기

타임라인에서 맞춤 데이터를 보려면 성능 패널에서 설정이 사용 설정되어 있는지 확인합니다. 캡처 설정 > 맞춤 트랙 표시.

성능 패널의 '캡처 설정'에 있는 '맞춤 트랙 표시' 체크박스

이 데모 페이지에서 사용해 보세요. 성능 기록을 시작하고 데모 페이지에서 새 코기 추가 를 클릭한 다음 기록을 중지합니다. 맞춤 도구 설명이 있는 이벤트, 요약 탭의 세부정보, 트레이스 요약의 맞춤 트랙 그룹 요약이 포함된 트레이스가 표시됩니다.

코드 예시

사용 가능한 각 메커니즘을 사용하여 API를 사용하여 성능 패널에 자체 데이터를 추가하는 방법의 몇 가지 예는 다음과 같습니다.

console.timeStamp API 예시:

// Take a start timestamp
const start = performance.now();

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

// Take an end timestamp
const end = performance.now();

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

그러면 성능 타임라인에 다음과 같은 맞춤 트랙 항목이 생성됩니다.

console.timeStamp API로 추가된 맞춤 항목이 있는 맞춤 트랙

사용자 시간 API 예시:

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

맞춤 트랙 및 항목

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

// Mark used to represent the start of the image processing task
// The start time is defaulted to now
const imageProcessinTimeStart = performance.now();

// ... 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: imageProcessinTimeStart,
  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"
    }
  }
});

그러면 도구 설명 텍스트 및 속성과 함께 타이밍 트랙에 다음과 같은 마커가 생성됩니다.

타이밍 트랙의 맞춤 마커