PerformanceFrameTiming は、ブラウザのイベントループに関するフレームタイミングデータを提供する抽象インターフェイスです。 フレームは、DOM イベントの処理、サイズ変更、スクロール、レンダリング、CSS アニメーションなど、1つのイベントループでブラウザが実行する作業量を表します。60 Hz のリフレッシュレートに対して 60 fps (フレーム/秒) のフレームレートは、応答性の良いユーザーエクスペリエンスの目標です。これはブラウザが約 16.7 ms でフレームを処理するはずであることを意味します。アプリケーションは、"frame" パフォーマンスエントリタイプに PerformanceObserver を登録することができます。オブザーバーは各フレームイベントの期間に関するデータを取得できます。この情報は、優れたユーザーエクスペリエンスを提供するのに時間がかかりすぎる領域を特定するのに役立ちます。
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/PerformanceFrameTiming" target="_top"><rect x="1" y="1" width="220" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">PerformanceFrameTiming</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
プロパティ
このインターフェイスにはプロパティはありませんが、次のようにプロパティを修飾および制約することで、次の PerformanceEntry プロパティ ("frame" performance entry types 用) を拡張します。
PerformanceEntry.entryType- "
frame" を返します。 PerformanceEntry.name- ドキュメントのアドレスを返します。
PerformanceEntry.startTime- フレームが開始されたときに
タイムスタンプを返します。 PerformanceEntry.duration- 連続する2つのフレームの
startTime間の差を示すタイムスタンプを返します。
メソッド
このインターフェイスにはメソッドがありません。
例
フレームタイミング API の使用の例を参照してください。
仕様
| 仕様書 | ステータス | コメント |
|---|---|---|
| Frame Timing PerformanceFrameTiming の定義 |
ドラフト | 初期定義 |
ブラウザの互換性
このページの互換性テーブルは構造化データから生成されます。データに貢献したい場合は https://github.com/mdn/browser-compat-data をチェックして、プルリクエストを送ってください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
PerformanceFrameTiming | Chrome
未対応
なし
| Edge ? | Firefox
未対応
なし
| IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android
未対応
なし
| Chrome Android
未対応
なし
| Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android ? |
凡例
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 実装ノートを参照してください。
- 実装ノートを参照してください。