PerformanceObserver
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.
メモ: この機能はウェブワーカー内で利用可能です。
PerformanceObserver
インターフェイスは、パフォーマンス測定イベントを監視し、ブラウザーのパフォーマンスタイムラインに記録されるものとして、新しいパフォーマンス項目の通知を受けるために使用されます。
コンストラクター
PerformanceObserver()
-
新しい
PerformanceObserver
オブジェクトを作成して返します。
静的プロパティ
PerformanceObserver.supportedEntryTypes
読取専用-
ユーザーエージェントが対応している
entryType
値の配列を返します。
インスタンスメソッド
PerformanceObserver.observe()
-
観測する項目型を設定します。パフォーマンスオブザーバーのコールバック関数は、指定した
entryTypes
のいずれかにパフォーマンス項目が記録されたときに呼び出されます。 PerformanceObserver.disconnect()
-
パフォーマンスオブザーバーコールバックがパフォーマンス項目を受け取るのを停止します。
PerformanceObserver.takeRecords()
-
パフォーマンスオブザーバーに格納されているパフォーマンス項目の現在のリストを空にして返します。
例
PerformanceObserver の作成
次の例では、 "mark" (PerformanceMark
) および "measure" (PerformanceMeasure
) イベントを監視する PerformanceObserver
を作成します。
perfObserver
コールバックは list
(PerformanceObserverEntryList
) を提供し、監視しているパフォーマンス項目を取得することができます。
function perfObserver(list, observer) {
list.getEntries().forEach((entry) => {
if (entry.entryType === "mark") {
console.log(`${entry.name}'s startTime: ${entry.startTime}`);
}
if (entry.entryType === "measure") {
console.log(`${entry.name}'s duration: ${entry.duration}`);
}
});
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
仕様書
Specification |
---|
Performance Timeline # dom-performanceobserver |
ブラウザーの互換性
BCD tables only load in the browser