PerformanceEntry

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.

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

PerformanceEntry オブジェクトは、パフォーマンスタイムラインの一部である単一のパフォーマンス指標をカプセル化します。

パフォーマンス API は、 PerformanceEntry の特殊なサブクラスである組み込み指標を提供します。これには、リソース読み込み、イベント時刻、最初の入力遅延 (FID) などの項目が含まれます。

パフォーマンス項目は、アプリケーション内の明示的な時点で Performance.mark() または Performance.measure() メソッドを作成することでも作成できます。これによって、パフォーマンスタイムラインに自分の指標を追加することができます。

PerformanceEntry インスタンスは常に次のサブクラスのいずれかになります。

インスタンスプロパティ

PerformanceEntry.name 読取専用

パフォーマンス項目の名前を表す文字列です。この値はサブタイプによって異なります。

PerformanceEntry.entryType 読取専用

パフォーマンス指標の種類を表す文字列です。たとえば "mark" であれば PerformanceMark が使用されています。

PerformanceEntry.startTime 読取専用

パフォーマンス指標の開始時刻を表す DOMHighResTimeStamp です。

PerformanceEntry.duration 読取専用

パフォーマンスイベントの期間を表す DOMHighResTimeStamp です。

インスタンスメソッド

PerformanceEntry.toJSON()

PerformanceEntry オブジェクトの JSON 表現を返します。

パフォーマンス項目での作業

次の例では、PerformanceMark 型と PerformanceMeasure 型の PerformanceEntry オブジェクトを作成します。 PerformanceMarkPerformanceMeasure のサブクラスは PerformanceEntry から durationentryTypenamestartTime プロパティを継承し、適切な値に設定します。

js
//コードの ログインを開始する場所に配置する
performance.mark("login-started");

// コードのログインが完了する場所に配置する
performance.mark("login-finished");

// ログイン期間を測定
performance.measure("login-duration", "login-started", "login-finished");

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-performanceentry

ブラウザーの互換性

BCD tables only load in the browser