PerformanceObserver: observe() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

observe()PerformanceObserver インターフェイスのメソッドで、観測するパフォーマンス項目型のセットを指定します。

項目型の一覧には PerformanceEntry.entryType を、ユーザーエージェントが対応している項目型の一覧には PerformanceObserver.supportedEntryTypes を使用してください。

一致するパフォーマンス項目が記録されると、パフォーマンスオブザーバーのコールバック関数 (PerformanceObserver) の作成時に設定されたコールバック関数が呼び出されます。

構文

js
observe(options)

引数

options

以下の使用可能メンバーを持つオブジェクトです。

buffered

論理値のフラグで、バッファリングされた項目をオブザーバーのバッファーにキューイングするかどうかを示します。 "type" オプションと一緒の場合のみ使用してください。

durationThreshold

PerformanceEventTiming 項目の閾値を定義する DOMHighResTimeStamp です。既定値では 104ms で、8ms 単位で丸められます。使用可能な閾値の最小値は 16ms です。 entryTypes オプションと一緒に使用することはできません。

entryTypes

文字列オブジェクトの配列で、それぞれ観測するパフォーマンス項目の型を指定します。 "type", "buffered", "durationThreshold" オプションと一緒に使用することはできません。

有効なパフォーマンス項目名の一覧は PerformanceEntry.entryType を参照ください。認識できない型は無視されますが、開発者がコードをデバッグするのを支援するために、ブラウザーがコンソールに警告メッセージを出力することがあります。有効な型が見つからなかった場合、 observe() は何の効果もありません。

type

観測するパフォーマンス項目の型を指定する単一の文字列。 entryTypes オプションと一緒に使用してはいけません。

返値

なし (undefined)。

この例では、2 つの PerformanceObservers を作成して設定します。1 つは"mark""frame" イベントを観測し、もう 1 つは "measure" イベントを観測します。

js
const observer = new PerformanceObserver((list, obj) => {
  list.getEntries().forEach((entry) => {
    // Process "mark" and "measure" events
  });
});
observer.observe({ entryTypes: ["mark", "measure"] });

単一のパフォーマンス項目型を観測

次の例は、bufferedtype の構成オプションを使用して、リソースタイミングイベント (PerformanceResourceTiming) のバッファーイベントを取得し、新しいイベントを購読します。オブザーバーが buffered または durationThreshold オプションを使用するように構成する必要がある場合は、 entryType の代わりに type を使用します。そうしないと、複数の型のパフォーマンス項目をうまく収集できません。

js
const observer = new PerformanceObserver((list, obj) => {
  list.getEntries().forEach((entry) => {
    // Process "resource" events
  });
});
observer.observe({ type: "resource", buffered: true });

仕様書

Specification
Performance Timeline
# dom-performanceobserver-observe

ブラウザーの互換性

BCD tables only load in the browser