機能拡張 API を使用してパフォーマンスプロファイルをカスタマイズする

詳細な内容:

概要
主な利点
- 適切な API を選択する
を使用してデータを挿入する console.timeStamp()
ユーザータイミング API を使用してデータを挿入する
- devtools オブジェクト
パフォーマンスプロファイルでカスタムデータを表示する
コード例
- console.timeStamp() API の例
- ユーザータイミング API の例
  - カスタムトラックとエントリをタイムラインに追加する (performance.measure())
  - タイミングトラックにマーカーを追加する (performance.mark())
関連項目

概要

パフォーマンス ツールでは、ブラウザーの組み込みメトリックに加えて、独自のパフォーマンスデータを表示できます。 パフォーマンス ツールで独自のカスタムパフォーマンスデータを表示すると、次のような場合に役立ちます。

フレームワークを構築し、内部プロセスを視覚化する必要があります。
ライブラリを開発し、コードの影響を追跡する必要があります。
クライアント側の処理が多い複雑な Web アプリケーションを構築する。

パフォーマンス拡張 API を使用すると、コードで何が起こっているのかを理解できます。

カスタムの測定値とイベントを挿入することで、 パフォーマンス ツール内でカスタマイズされた視覚化を作成できます。

パフォーマンス拡張 API は、これを実現するための 2 つの方法です。

console.timeStamp() API (DevTools 用に拡張)

この API は、アプリケーションをインストルメント化し、DevTools のパフォーマンスツールのみにタイミングデータを表示するための高 パフォーマンス メソッドを提供します。ランタイムのオーバーヘッドを最小限に抑えて設計されているため、ホットパスと運用ビルドのインストルメント化に適しています。ブラウザーの内部パフォーマンスタイムラインにエントリは追加されません。
ユーザータイミング API ( performance.mark() と performance.measure()を使用)

この API は、既存の User Timings API を利用します。また、ブラウザーの内部パフォーマンスタイムラインにエントリを追加して、他のパフォーマンスツールとの詳細な分析と統合を可能にします。MDN のパフォーマンス API に関するページを参照してください。

パフォーマンスツールでのカスタムトラックの例

上のスクリーンショットには、結果を強調表示するために次のボックスが追加されています。

タイミング トラックの赤いボックス: performance.mark()。カスタムマーカーは、 フィルター処理の開始、 フィルター処理の完了、 写真の選択です。垂直破線はすべてのトラックにまたがります。
カスタム 写真作成 トラックの青いボックス: performance.measure()
カスタム コンソールタイムスタンプトラック の緑色のボックス: console.timeStamp()

主な利点

両方の API には次の情報が用意されています。

カスタムトラック: 専用のトラックとトラックグループをパフォーマンスプロファイルに追加して、コードの固有のパフォーマンスの側面を表します。
エントリ： 重要なイベントまたは特定の操作の期間を明確にマークするエントリをこれらのトラックに設定します。
色のカスタマイズ: 色分けを使用して、さまざまな種類のイベントや測定値を一目で視覚的に区別します。

適切な API を選択する

console.timeStamp() API と User Timings API は、さまざまなニーズに対応します。

次の場合は、 console.timeStamp() API を使用します。

特に運用環境のビルドでは、インストルメンテーションのパフォーマンスへの影響が主な懸念事項です。
追加のメタデータを必要とせずに、期間またはイベントをマークする迅速かつ効率的な方法が必要です。
パフォーマンス ツール内で視覚化する必要があるのはデータだけです。

次の場合は、User Timings API (performance.mark() または performance.measure()) を使用します。

各エントリと、既に User Timings API を使用している場合は、追加のデータを格納する必要があります。
リッチデータ (ヒント、詳細なプロパティ) をパフォーマンスエントリに関連付ける必要があります。
特定の瞬間を強調表示する視覚的マーカーを追加する必要があります。
データは DevTools だけでなく、より広範な分析やその他のツールのブラウザーの内部パフォーマンスタイムラインでも使用できるようにする必要があります。
ユーザータイミング API に既に慣れているか、使用しています。

フォトギャラリーのデモでは、これらの 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:

エントリの色。

関連項目:

console.timeStamp 拡張機能の仕様 - メソッドの 6 パラメーターバージョン。
- console: timeStamp() 静的メソッド - メソッドの 1 パラメーターバージョン。

ユーザータイミング API を使用してデータを挿入する

カスタムデータを挿入するには、performance.mark() メソッドの detail プロパティ内、または 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
}

パフォーマンスプロファイルでカスタムデータを表示する

記録されたパフォーマンスプロファイルにカスタムデータを表示するには、 パフォーマンス ツールで、まずパフォーマンス拡張 API のいずれかを使用してから、プロファイルを記録します。

プロフィールを記録し、フォトギャラリーのデモページのカスタムパフォーマンスデータを表示するには:

フォトギャラリーのデモ Web ページを新しいウィンドウまたはタブで開きます。

または、サンプルコードを変更できるように、
1. DevTools のサンプルコードの「Edge Demos リポジトリをドライブに複製する」に従って、"MicrosoftEdge/Demos" リポジトリを複製します。
2. DevTools のサンプルコードの「localhost サーバーを起動する」に従って、複製された /demos/ ディレクトリで localhost サーバーを起動します。
3. ブラウザーで、新しいウィンドウまたはタブで、 http://localhost:8080/photo-gallery/ または同等のに移動します。
Web ページを右クリックし、[ 検査] を選択します。

DevTools が開きます。
DevTools で、 パフォーマンス () ツールを選択します。
パフォーマンス ツールで、[キャプチャ設定] ([キャプチャ設定) ボタンをクリックし、[カスタムトラックを表示する] チェックボックスがオンになっていることを確認します。
[ CPU 調整 ] ドロップダウンリストで、[ 4 倍の速度低下 - 推奨] を選択します。

調整警告インジケーターが [ パフォーマンス ] タブに追加されます。
ページを更新して選択を解除します。
[ レコード ] () ボタンをクリックします。
デモページの上部にある左側の カメラ () ドロップダウンメニューで、[ すべて] から [Apple iPhone 12] に変更します。
[カメラ] フィルターを [すべて] に戻します。
最初の写真をクリックします。

写真が拡大します。
DevTools で、[ 停止 ] ボタンをクリックします。

プロファイルが表示されます。
[ DevTools のカスタマイズと制御 ] () をクリックし、[ ドッキングの場所] の横にある [ 別のウィンドウにドッキング解除 ] () を選択します。

DevTools は独自のウィンドウにデタッチされるため、より多くのデータを見やすくなります。
[ カスタムパフォーマンスタイミング] - [カスタムトラックトラック ] グループまで下にスクロールし、展開します。
カスタムトラックを展開します。
- 写真の作成
- コンソールタイムスタンプトラック
マウスキーと矢印キーを使用してプロファイルをシフトおよびズームし、カスタムパフォーマンス測定値を表示します。
読み込みトラックの [読み込み] マーカーなど、カスタムトラック内のマーカーにカーソルを合わせます。

期間やキャプションなど、カスタムヒントが表示されます。
カスタムトラックでマーカーを選択します。

パフォーマンス ツールの下部にある [概要] タブに、マーカーの詳細が表示されます。

これらのカスタムパフォーマンスメジャーを定義するコードは、以下の「カスタムトラックとエントリをタイムライン (performance.measure())に追加する」に示されています。

コード例

次に、API を使用して、使用可能な各メカニズムを使用して パフォーマンス ツールに独自のデータを追加する方法の例をいくつか示します。

`console.timeStamp()` API の例

たとえば、フォトギャラリー/gallery.jsでは、loadPhoto() 関数は、performance.now()を呼び出してstartTimeとendTimeを定義し、console.timeStamp() を呼び出して、その写真がクリックされた後に写真を読み込むのにかかる時間を示します。

// Load a photo and return a promise that resolves when the photo is loaded.
function loadPhoto(fileName) {
  // Record the start time of the photo loading for performance tracking.
  const startTime = performance.now();

  return new Promise(resolve => {
    // Load the image by creating a new image element.
    const imageEl = document.createElement("img");
    imageEl.src = fileName;

    // Listen for the load event to resolve the promise when the image is loaded.
    imageEl.addEventListener('load', () => {
      // Record the end time of the photo loading.
      const endTime = performance.now();

      // Display the photo loading duration in the Performance tool, by using console.timeStamp.
      console.timeStamp("Loading photo",              // label
                        startTime,                    // start
                        endTime,                      // end
                        "Console timestamp track",    // trackName
                        "Custom performance timings", // trackGroup
                        "primary-dark");              // color

      resolve(imageEl);
    }, { once: true });
  });
}

結果のプロファイルを表示するには:

上記の「パフォーマンスプロファイルでカスタムデータを表示する」の手順を実行します。
[ カスタムパフォーマンスタイミング] - [カスタムトラックトラック ] グループまで下にスクロールし、展開します。
コンソールタイムスタンプ トラックを展開します。
マウスキーと矢印キーを使用してプロファイルをシフトおよびズームし、カスタムパフォーマンス測定値を表示します。

写真の読み込みイベントは、console.timeStamp()を使用して作成されました。このイベントは、開始時刻と終了時刻で作成されるため、期間があります。このイベントは、クリックした写真の全画面表示バージョンの読み込みにかかった時間に対応します。

関連項目:

console.timeStamp()を使用してデータを挿入する(上記) - 構文。
performance.now()

ユーザータイミング API の例

次のセクションでは、パフォーマンスタイムラインに次のコードを追加する方法を紹介するコードの例を参照してください。

カスタムトラックとエントリをタイムラインに追加する (performance.measure())
タイミングトラックにマーカーを追加する (performance.mark())

カスタムトラックとエントリをタイムラインに追加する (`performance.measure()`)

カスタムトラックを作成し、エントリを設定して、カスタムトラック内のパフォーマンスデータを視覚化します。

たとえば、フォトギャラリー/gallery.jsでは、populateGallery() 関数は、performance.now()を呼び出してstartTimeとendTimeを定義し、performance.measure() を呼び出してギャラリーで写真を作成するのにかかる時間を示します。

// Populate the gallery with the given images.
function populateGallery(images) {
  // Empty the existing gallery elements.
  galleryEl.innerHTML = '';

  // Iterate over the images.
  images.forEach(({ file, user, description, w, h, meta }) => {
    // Record the start time of this image creation for performance tracking.
    const startTime = performance.now();

    // Create the necessary DOM elements, and append them to the gallery.
    const liEl = createImageDOM(file, user, description, meta, w, h);
    galleryEl.appendChild(liEl);

    // Record the end time of this image creation.
    const endTime = performance.now();

    // Display the image creation duration in the Performance tool
    // by using the performance.measure API, with the devtools
    // object.
    performance.measure(`Image ${file} created`, {
      start: startTime,
      end: endTime,
      detail: {
        devtools: {
          dataType: "track-entry",
          color: "primary",
          trackGroup: "Custom performance timings",
          track: "Photo creation",
          properties: [
            ['File', file],
            ['Width', w],
            ['Height', h],
            ['User', user],
          ],
          tooltipText: `Image ${file} created`
        }
      },
    });
  });
}

結果のプロファイルを表示するには:

上記の「パフォーマンスプロファイルでカスタムデータを表示する」の手順を実行します。
[ カスタムパフォーマンスタイミング] - [カスタムトラックトラック ] グループまで下にスクロールし、展開します。
写真作成トラックを展開します。
マウスキーと矢印キーを使用してプロファイルをシフトおよびズームし、カスタムパフォーマンスメジャーを表示します。

これにより、パフォーマンスタイムラインに次のカスタムトラックエントリが表示され、ツールヒントのテキストとプロパティが表示されます。

performance.measure()によって作成されたイベントには短い期間があるため、プロファイルに表示するには拡大する必要があります。これらの各イベントは、イメージの作成を記録します。これは、フィルター (ドロップダウンリスト) の値を変更したとき、およびギャラリー UI 全体が更新されたときに発生します。

写真の作成イベントは、performance.mark()から発生するStart filteringとDone filteringのパフォーマンスマークの間に表示されます (次のセクションで説明します)。

関連項目:

タイミングトラックにマーカーを追加する (`performance.mark()`)

すべてのトラックにまたがるカスタムマーカーを使用して、タイムライン内の特定の関心ポイントを視覚的に強調表示します。

たとえば、フォトギャラリー/gallery.jsでは、イベントリスナーはデモページのフィルタードロップダウンリストで input イベントを処理します。イベントリスナーは、新しいフィルターが適用される前と、新しいフィルターが適用された後に、 performance.mark() を 2 回呼び出します。

// Handle input events on the filter selects.
addEventListener('input', e => {
  // Check if the input event is from a filter select.
  // If not, return early.
  const filter = e.target.closest('.filter select');
  if (!filter) {
    return;
  }

  // Add a mark in the Performance tool's recorded profile to
  // indicate that a filter will be applied.
  performance.mark("Start filtering", {
    detail: {
      devtools: {
        dataType: "marker",
        color: "secondary",
        properties: [
          ['Filter Value', filter.value]
        ],
        tooltipText: "Start filtering"
      }
    }
  });

  // Reset the other filters.
  filterEl.querySelectorAll('.filter select').forEach(select => {
    if (select !== filter) {
      select.selectedIndex = 0;
    }
  });

  // Apply the filter based on the selected value.
  filterBy(filter);

  // Add a mark in the Performance tool's recorded profile to
  // indicate that a filter was applied.
  performance.mark("Done filtering", {
    detail: {
      devtools: {
        dataType: "marker",
        color: "tertiary",
        properties: [
          ['Filter Value', filter.value]
        ],
        tooltipText: "Done filtering"
      }
    }
  });
});

// Handle click events on photos.
addEventListener('click', e => {
  const clickedPhoto = e.target.tagName === 'IMG' && e.target.closest('.photo');
  if (!clickedPhoto) {
    return;
  }

  // Add a mark in the Performance tool's recorded profile to
  // indicate that a photo was clicked.
  performance.mark("Photo selected", {
    detail: {
      devtools: {
        dataType: "marker",
        color: "secondary-dark",
        properties: [
          ['photo', clickedPhoto.src]
        ],
        tooltipText: "Photo selected"
      }
    }
  });

  selectPhoto(clickedPhoto);
});

結果のプロファイルを表示するには:

上記の「パフォーマンスプロファイルでカスタムデータを表示する」の手順を実行します。
マウスキーと矢印キーを使用してプロファイルをシフトおよびズームし、カスタムパフォーマンスメジャーを表示します。

タイミング トラックには、フィルター処理の開始、フィルター処理の完了、および選択したカスタムマーカーの写真が表示されます。

performance.mark()によって作成されたイベント (マーカー) には期間がありません。プロファイルには、フィルターの変更の開始と終了 (デモページのドロップダウンメニューを使用) と写真が選択された瞬間 (写真が選択されたマーカー) にマークされます。

関連項目:

パフォーマンス: mark() メソッド

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-07-01

次の方法で共有

機能拡張 API を使用してパフォーマンス プロファイルをカスタマイズする

概要

主な利点

適切な API を選択する

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

ユーザー タイミング API を使用してデータを挿入する

devtools オブジェクト

パフォーマンス プロファイルでカスタム データを表示する

コード例

console.timeStamp() API の例

ユーザー タイミング API の例

カスタム トラックとエントリをタイムラインに追加する (performance.measure())

タイミング トラックにマーカーを追加する (performance.mark())

関連項目

フィードバック

その他のリソース

機能拡張 API を使用してパフォーマンスプロファイルをカスタマイズする

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

ユーザータイミング API を使用してデータを挿入する

`devtools` オブジェクト

パフォーマンスプロファイルでカスタムデータを表示する

`console.timeStamp()` API の例

ユーザータイミング API の例

カスタムトラックとエントリをタイムラインに追加する (`performance.measure()`)

タイミングトラックにマーカーを追加する (`performance.mark()`)