Chrome DevTools の CPU Profiler を使って負荷の高い関数を見極めます。
TL;DR
- CPU Profiler により、呼び出された関数とその関数の実行時間を正確に記録します。
- プロファイルをフレームチャートとして表示します。
CPU プロファイルの記録
JavaScript に問題があることがわかっている場合は、JavaScript の CPU プロファイルを収集します。CPU プロファイルによって、ページの関数の中で実行時間がかかっている箇所が示されます。
- DevTools の [Profiles] パネルに移動します。
- [Collect JavaScript CPU Profile] ラジオボタンを選択します。
- 記録ボタンをクリックします。
- 分析が必要と考える点に応じて、ページの再読み込み、ページの操作、または単純にページの実行を行います。
- 完了したら、記録の停止ボタンをクリックします。
Command Line API を使って、コマンドラインからプロファイルを記録してグループ化することもできます。
CPU プロファイルの表示
記録を終了すると、DevTools によってその記録のデータが自動的に [Profiles] パネルに設定されます。
既定のビューは [Heavy (Bottom Up)] です。このビューでは、パフォーマンスに最も影響した関数を確認し、それらの関数への呼び出し履歴を検証します。
並べ替え順の変更
並べ替え順を変更するには、選択した関数へのフォーカス設定アイコン（
）の隣にあるドロップダウン メニューをクリックし、以下のオプションのいずれかを選択します。
[Chart]。記録の時系列フレーム チャートを表示します。
[Heavy (Bottom Up)]。パフォーマンスへの影響が大きい順に関数を一覧し、関数の呼び出し履歴の調査を可能にします。 これが既定のビューです。
[Tree (Top Down)]。コールスタックの先頭から始めて、呼び出し構造の全体イメージを示します。
関数の除外
CPU プロファイルから関数を除外するには、除外する関数をクリックして選択し、選択した関数の除外アイコン（
）をクリックします。
除外した関数の合計時間は、その関数の呼び出し元に加算されます。
すべての関数を復元するアイコン（
）をクリックして、除外したすべての関数を記録に復元します。
CPU プロファイルをフレーム チャートとして表示
フレーム チャートのビューでは、CPU プロファイルが時系列で表示されます。
CPU プロファイルを記録した後、並べ替え順の変更を行って [Chart] に設定し、記録をフレーム チャートで表示します。
フレーム チャートは次の 2 つの部分に分かれています。
- 概要。記録全体の鳥瞰ビュー。 バーの高さは、コールスタックの深さに対応します。 つまり、バーが高いほど、コールスタックは深くなります。
- コールスタック。記録中に呼び出された関数を詳しく示すビュー。 横軸が時間で、縦軸がコールスタックです。 スタックは、トップダウンで編成されます。つまり、一番上の関数がすぐ下の関数を呼び出しています。以降も同様です。
関数はランダムに色分けされます。他のパネルで使われている色とは無関係です。 ただし、呼び出し履歴全体では、各関数が常に同じ色で示されているため、実行のパターンがわかります。
高さのあるコールスタックが必ずしも重要なわけではありません。単に、多くの関数を呼び出していることを表しています。 しかし、バーの幅は、呼び出しの完了に時間がかかったことを表します。 こうした関数が最適化の候補です。
記録の特定部分の拡大
概要ペインでマウスをクリックした状態で左右にドラッグして、コールスタックの特定部分を拡大します。 拡大後には、記録の選択した部分のコールスタックが自動的に表示されます。
関数詳細の表示
関数をクリックすると、[Sources] パネルに定義が表示されます。
関数の上にカーソルを合わせると、関数名とタイミングのデータが表示されます。表示されるのは以下の情報です。
- [Name]。関数の名前。
- [Self time]。 関数の現在の呼び出しを完了するまでにかかった時間。関数自体のステートメントのみを含み、その関数が呼び出した関数は含みません。
- [Total time]。現在の呼び出しを完了するまでにかかった時間。この関数と、この関数が呼び出したすべての関数を含みます。
- [URL]。
file.js:100形式での関数定義の場所。file.jsは関数が定義されているファイル名、100は定義の行番号です。 - [Aggregated self time]。記録全体で該当関数のすべての呼び出しを集計した時間。この関数が呼び出した関数は含みません。
- [Aggregated total time]。該当関数のすべての呼び出しを集計した総時間。この関数が呼び出した関数も含みます。
- [Not optimized]。プロファイラが最適化の候補となる関数を検出した場合、ここに一覧されます。
