Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

extensibility API を使用してパフォーマンスデータをカスタマイズする

Andrés Olivares

Sofia Emelianova

概要

ブラウザの組み込み指標だけでなく、アプリケーションのパフォーマンスに関するより詳細な分析情報を取得したい場合は、[パフォーマンス] パネルで、独自のパフォーマンスデータをタイムラインに直接取り込めるようになりました。内部プロセスを可視化する必要があるフレームワーク作成者、コードの影響を追跡するライブラリデベロッパー、カスタム計測機能を使用して複雑なアプリケーションを構築するデベロッパーなど、パフォーマンス拡張機能 API は、内部で何が起こっているかを包括的に把握するためのツールを提供します。

カスタムの測定とイベントを挿入することで、使い慣れた [パフォーマンス] パネル内でカスタマイズされた可視化を作成できます。フレームワークのコンポーネントライフサイクルイベントを標準のブラウザパフォーマンス指標とともに表示したり、カスタムレンダリングエンジンの実行フローをブラウザのレンダリングパイプラインと完全に同期して追跡したりすることを想像してみてください。

この API では、次の 2 つの方法でこれを実現できます。

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 だけでなく、ブラウザの内部パフォーマンスタイムラインでもデータを利用できるようにして、より広範な分析や他のツールで使用できるようにする必要がある。
- User Timings API についてよく知っている、またはすでに使用している。

`console.timeStamp` を使用してデータを挿入する

console.timeStamp API が拡張され、特に DevTools がトレースを記録していない場合に、最小限のオーバーヘッドで [Performance] パネルにカスタムタイミングエントリを作成できるようになりました。

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:

エントリの色。

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
}

タイムラインでデータを表示する

タイムラインにカスタムデータを表示するには、[パフォーマンス] パネルで、[] [キャプチャ設定] > [カスタムトラックを表示] の設定がオンになっていることを確認します。

パフォーマンスパネルの [キャプチャ設定] にある [カスタムトラックを表示] チェックボックス。

こちらのデモページでお試しください。パフォーマンスの記録を開始し、デモページで [Add new Corgi] をクリックしてから、記録を停止します。トレースにカスタムトラックが表示されます。このトラックには、カスタムツールチップを含むイベント、[Summary] タブの詳細、トレースの概要のカスタムトラックグループの概要が含まれています。

コードの例

以下に、利用可能な各メカニズムを使用して、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 の例:

次のセクションでは、パフォーマンスタイムラインに次の項目を追加する方法を示すコード例をご覧ください。

タイムラインへのカスタムトラックとエントリ
[Timings] トラックのマーカー

カスタムトラックとエントリ

カスタムトラックを作成し、エントリを入力して、カスタムトラックでパフォーマンスデータを可視化します。次に例を示します。

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

これにより、[タイミング] トラックに次のマーカーが表示され、ツールチップテキストとプロパティも表示されます。

[タイミング] トラックのカスタムマーカー。

extensibility API を使用してパフォーマンス データをカスタマイズする コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

概要