PerformancePaintTiming

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

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

プロパティ

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

PerformanceEntry.entryType
"paint" を返します。
PerformanceEntry.name
"first-paint" または "first-contentful-paint" を返します。
PerformanceEntry.startTime
描画が行われたときに タイムスタンプ を返します。
PerformanceEntry.duration
0 を返します。

メソッド

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

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.

仕様

仕様書 ステータス コメント
Paint Timing
PerformancePaintTiming の定義
草案 初期定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
PerformancePaintTimingChrome 完全対応 60Edge ? Firefox ? IE ? Opera 完全対応 47Safari ? WebView Android 完全対応 60Chrome Android 完全対応 60Firefox Android ? Opera Android 完全対応 44Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明