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
) の作成時に設定されたコールバック関数が呼び出されます。
構文
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"
イベントを観測します。
const observer = new PerformanceObserver((list, obj) => {
list.getEntries().forEach((entry) => {
// Process "mark" and "measure" events
});
});
observer.observe({ entryTypes: ["mark", "measure"] });
単一のパフォーマンス項目型を観測
次の例は、buffered
と type
の構成オプションを使用して、リソースタイミングイベント (PerformanceResourceTiming
) のバッファーイベントを取得し、新しいイベントを購読します。オブザーバーが buffered
または durationThreshold
オプションを使用するように構成する必要がある場合は、 entryType
の代わりに type
を使用します。そうしないと、複数の型のパフォーマンス項目をうまく収集できません。
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