PerformancePaintTiming
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
Paint Timing の PerformancePaintTiming
インタフェースは、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.
仕様書
Specification |
---|
Paint Timing 1 # sec-PerformancePaintTiming |
ブラウザーの互換性
BCD tables only load in the browser