パフォーマンスツールの UI は、大きく 4 つに分けられます:
ツールバー
ツールバーには、以下のボタンがあります:
- 記録を開始および終了する
- 過去に保存した記録をインポートする
- 記録ペインを消去する。これを行うと、未保存の記録をすべて失うので注意してください。
- タイムラインビューで表示するマーカーをフィルタリングする
- 詳細ペインのツールを切り替える
- 設定用のポップアップメニューを開く
記録ペイン
記録ペインでは、現在のセッションで取得した記録やインポートした記録を含む、読み込み済みの全記録を一覧表示します。
いつでも記録を選択すると、その記録の情報を他のペインに表示します。記録ペインで別の項目をクリックすると、その記録を選択できます。"保存" をクリックすると、記録を JSON ファイルとして保存できます。
記録の概要
ここでは、X 軸を時間として記録全体の概要を表示します。
ここにはタイムラインの概要とフレームレートのグラフという、2 つの要素があります。
タイムラインの概要
ここでは、タイムラインをコンパクトに表示したビューを提供します:
記録した処理は、タイムラインビューと同じ方式で色分けされます。
フレームレートのグラフ
フレームレートは、記録している間のブラウザの応答性を概観します:
フレームレートの個別記事をご覧ください。
イベントを関連づける
複数の要素が同期しているため、ある要素のイベントと別の要素のイベントに関連性を見いだせる場合があります。
例えば以下のスクリーンショットでは、長時間の描画操作 (タイムラインの概要では緑色のバーで表示) とフレームレートの落ち込みに関連性があります:
拡大
記録を詳しく調査するため、概要ビューで記録の一部分を選択できます。一部分を選択すると、その部分だけを含むようにメインビューを更新します。以下のスクリーンショットではフレームレートが落ち込んだ部分を選択して、長時間の描画操作を詳しく見ています:
詳細ペイン
詳細ペインでは、選択したツールの情報を表示します。ツールを切り替えるには、ツールバーのボタンを使用してください。
タイムライン
タイムラインでは、記録中にブラウザが実行した操作 (JavaScript を実行、CSS を更新、ページのレイアウトを更新、再描画を実行など) を表示します。X 軸は時間を表し、記録した操作を滝のように、またブラウザが実行した操作の連続性を反映するように配置します。
タイムラインについて詳しくは、タイムラインのページをご覧ください。
呼び出しツリー
呼び出しツリーは、ページで実行している JavaScript のサンプリングプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。
呼び出しツリーについて詳しくは、コールツリーのページをご覧ください。
フレームチャート
呼び出しツリーが記録中にサイトのどの関数で、もっとも多くの実行時間がかかったかを示すものであるなら、フレームチャートは実行中のある時点のコールスタックを示すものです:
フレームチャートについて詳しくは、フレームチャートのページをご覧ください。
メモリ割り当て
メモリ割り当てビューは、Firefox 46 の新機能です。
メモリ割り当てビューは呼び出しツリービューと似ていますが、こちらはメモリ割り当てに特化したビューです。プロファイルの中でページ内のどの関数がもっとも多くのメモリ割り当てを行ったかを表示します。
メモリ割り当てビューは、プロファイルを記録する前にパフォーマンスツールの設定で "メモリ割り当てを記録" にチェックを入れた場合に限り表示します:
メモリ割り当てビューについて詳しくは、メモリ割り当てビューのページをご覧ください。