PerformanceFrameTiming

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

PerformanceFrameTiming は、ブラウザのイベントループに関するフレームタイミングデータを提供する抽象インターフェイスです。 フレームは、DOM イベントの処理、サイズ変更、スクロール、レンダリング、CSS アニメーションなど、1つのイベントループでブラウザが実行する作業量を表します。60 Hz のリフレッシュレートに対して 60 fps (フレーム/秒) のフレームレートは、応答性の良いユーザーエクスペリエンスの目標です。これはブラウザが約 16.7 ms でフレームを処理するはずであることを意味します。
 

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

プロパティ

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

PerformanceEntry.entryType
"frame" を返します。
PerformanceEntry.name
ドキュメントのアドレスを返します。
PerformanceEntry.startTime
フレームが開始されたときに タイムスタンプ を返します。
PerformanceEntry.duration
連続する2つのフレームの startTime 間の差を示す タイムスタンプ を返します。

メソッド

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

フレームタイミング API の使用の例を参照してください。

仕様

仕様書 ステータス コメント
Frame Timing
PerformanceFrameTiming の定義
ドラフト 初期定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
PerformanceFrameTiming
実験的
Chrome 未対応 なし
補足
未対応 なし
補足
補足 See Chrome bug 120796
Edge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1158032
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なし
補足
未対応 なし
補足
補足 See Chrome bug 120796
Chrome Android 未対応 なし
補足
未対応 なし
補足
補足 See Chrome bug 120796
Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?

凡例

未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

あわせて参照