← 返回首页

PerformanceObserver - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

PerformanceObserver

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.

* Some parts of this feature may have varying levels of support.

メモ: この機能はウェブワーカー内で利用可能です。

PerformanceObserver インターフェイスは、パフォーマンス測定イベントを監視し、ブラウザーのパフォーマンスタイムラインに記録されるものとして、新しいパフォーマンス項目の通知を受けるために使用されます。

In this article

コンストラクター

PerformanceObserver()

新しい PerformanceObserver オブジェクトを作成して返します。

静的プロパティ

PerformanceObserver.supportedEntryTypes 読取専用

ユーザーエージェントが対応している entryType 値の配列を返します。

インスタンスメソッド

PerformanceObserver.observe()

観測する項目型を設定します。パフォーマンスオブザーバーのコールバック関数は、指定した entryTypes のいずれかにパフォーマンス項目が記録されたときに呼び出されます。

PerformanceObserver.disconnect()

パフォーマンスオブザーバーコールバックがパフォーマンス項目を受け取るのを停止します。

PerformanceObserver.takeRecords()

パフォーマンスオブザーバーに格納されているパフォーマンス項目の現在のリストを空にして返します。

例

PerformanceObserver の作成

次の例では、 "mark" (PerformanceMark) および "measure" (PerformanceMeasure) イベントを監視する PerformanceObserver を作成します。 perfObserver コールバックは list (PerformanceObserverEntryList) を提供し、監視しているパフォーマンス項目を取得することができます。

js
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
# performanceobserver

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

関連情報

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2023年10月19日 by MDN contributors.

View this page on GitHub • Report a problem with this content

パフォーマンス API
PerformanceObserver
コンストラクター
1. PerformanceObserver()
静的プロパティ
1. supportedEntryTypes
インスタンスメソッド
Performance API に関連するページ
ガイド
1. Performance data
2. High precision timing
3. Long animation frame timing
4. リソースタイミング
5. ナビゲーションタイミング
6. User timing
7. Server timing
8. Monitoring bfcache blocking reasons