PerformanceEntry

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2017年9月⁩.

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

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 オブジェクトを作成します。 PerformanceMark と PerformanceMeasure のサブクラスは PerformanceEntry から duration、entryType、name、startTime プロパティを継承し、適切な値に設定します。

//コードの ログインを開始する場所に配置する
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"] });