PerformancePaintTiming

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

Paint Timing の PerformancePaintTiming インタフェースは、Web ページ構築中の "paint" ("render" とも呼ばれる) 操作に関するタイミング情報を提供します。「ペイント」とは、レンダリングツリーを画面上のピクセルに変換することです。

アプリケーションは、"paint" パフォーマンスエントリタイプ に対して PerformanceObserver を登録することができ、オブザーバーはペイントイベントが発生した時間を取得することができます。この情報を使用して、優れたユーザーエクスペリエンスを提供するのに時間がかかりすぎる領域を特定するのに役立ちます。

PerformanceEntry PerformancePaintTiming

プロパティ

このインタフェースにはプロパティはありませんが、次のようにプロパティを修飾および制約することで、次の PerformanceEntry プロパティ ("paint"パフォーマンスエントリタイプ 用) を拡張します。

PerformanceEntry.entryType

"paint" を返します。

PerformanceEntry.name

"first-paint" または "first-contentful-paint" を返します。

PerformanceEntry.startTime

描画が行われたときに タイムスタンプ を返します。

PerformanceEntry.duration

0 を返します。

メソッド

このインターフェイスにはメソッドがありません。

例

js

function showPaintTimings() {
  if (window.performance) {
    let performance = window.performance;
    let performanceEntries = performance.getEntriesByType("paint");
    performanceEntries.forEach((performanceEntry, i, entries) => {
      console.log(
        "The time to " +
          performanceEntry.name +
          " was " +
          performanceEntry.startTime +
          " milliseconds.",
      );
    });
  } else {
    console.log("Performance timing isn't supported.");
  }
}

上記のコードは、次のようなコンソール出力を生成します。

The time to first-paint was 2785.915 milliseconds.
The time to first-contentful-paint was 2787.460 milliseconds.

仕様書

Specification
Paint Timing
# sec-PerformancePaintTiming

ブラウザーの互換性

BCD tables only load in the browser