JavaScript 実行の高速化

Chrome DevTools の CPU Profiler を使って負荷の高い関数を見極めます。

CPU プロファイル

TL;DR

  • CPU Profiler により、呼び出された関数とその関数の実行時間を正確に記録します。
  • プロファイルをフレームチャートとして表示します。

CPU プロファイルの記録

JavaScript に問題があることがわかっている場合は、JavaScript の CPU プロファイルを収集します。CPU プロファイルによって、ページの関数の中で実行時間がかかっている箇所が示されます。

  1. DevTools の [Profiles] パネルに移動します。
  2. [Collect JavaScript CPU Profile] ラジオボタンを選択します。
  3. 記録ボタンをクリックします。
  4. 分析が必要と考える点に応じて、ページの再読み込み、ページの操作、または単純にページの実行を行います。
  5. 完了したら、記録の停止ボタンをクリックします。

Command Line API を使って、コマンドラインからプロファイルを記録してグループ化することもできます。

CPU プロファイルの表示

記録を終了すると、DevTools によってその記録のデータが自動的に [Profiles] パネルに設定されます。

既定のビューは [Heavy (Bottom Up)] です。このビューでは、パフォーマンスに最も影響した関数を確認し、それらの関数への呼び出し履歴を検証します。

並べ替え順の変更

並べ替え順を変更するには、選択した関数へのフォーカス設定アイコン（選択した関数へのフォーカス設定アイコン）の隣にあるドロップダウン メニューをクリックし、以下のオプションのいずれかを選択します。

[Chart]。記録の時系列フレーム チャートを表示します。

フレーム チャート

[Heavy (Bottom Up)]。パフォーマンスへの影響が大きい順に関数を一覧し、関数の呼び出し履歴の調査を可能にします。 これが既定のビューです。

影響が大きい順に一覧したチャート

[Tree (Top Down)]。コールスタックの先頭から始めて、呼び出し構造の全体イメージを示します。

ツリーチャート

関数の除外

CPU プロファイルから関数を除外するには、除外する関数をクリックして選択し、選択した関数の除外アイコン（関数の除外アイコン）をクリックします。 除外した関数の合計時間は、その関数の呼び出し元に加算されます。

すべての関数を復元するアイコン（すべての関数を復元するアイコン）をクリックして、除外したすべての関数を記録に復元します。

CPU プロファイルをフレーム チャートとして表示

フレーム チャートのビューでは、CPU プロファイルが時系列で表示されます。

CPU プロファイルを記録した後、並べ替え順の変更を行って [Chart] に設定し、記録をフレーム チャートで表示します。

フレーム チャート ビュー

フレーム チャートは次の 2 つの部分に分かれています。

  1. 概要。記録全体の鳥瞰ビュー。 バーの高さは、コールスタックの深さに対応します。 つまり、バーが高いほど、コールスタックは深くなります。
  2. コールスタック。記録中に呼び出された関数を詳しく示すビュー。 横軸が時間で、縦軸がコールスタックです。 スタックは、トップダウンで編成されます。つまり、一番上の関数がすぐ下の関数を呼び出しています。以降も同様です。

関数はランダムに色分けされます。他のパネルで使われている色とは無関係です。 ただし、呼び出し履歴全体では、各関数が常に同じ色で示されているため、実行のパターンがわかります。

注釈付きのフレーム チャート

高さのあるコールスタックが必ずしも重要なわけではありません。単に、多くの関数を呼び出していることを表しています。 しかし、バーの幅は、呼び出しの完了に時間がかかったことを表します。 こうした関数が最適化の候補です。

記録の特定部分の拡大

概要ペインでマウスをクリックした状態で左右にドラッグして、コールスタックの特定部分を拡大します。 拡大後には、記録の選択した部分のコールスタックが自動的に表示されます。

拡大したフレーム チャート

関数詳細の表示

関数をクリックすると、[Sources] パネルに定義が表示されます。

関数の上にカーソルを合わせると、関数名とタイミングのデータが表示されます。表示されるのは以下の情報です。

  • [Name]。関数の名前。
  • [Self time]。 関数の現在の呼び出しを完了するまでにかかった時間。関数自体のステートメントのみを含み、その関数が呼び出した関数は含みません。
  • [Total time]。現在の呼び出しを完了するまでにかかった時間。この関数と、この関数が呼び出したすべての関数を含みます。
  • [URL]。 file.js:100 形式での関数定義の場所。file.js は関数が定義されているファイル名、100 は定義の行番号です。
  • [Aggregated self time]。記録全体で該当関数のすべての呼び出しを集計した時間。この関数が呼び出した関数は含みません。
  • [Aggregated total time]。該当関数のすべての呼び出しを集計した総時間。この関数が呼び出した関数も含みます。
  • [Not optimized]。プロファイラが最適化の候補となる関数を検出した場合、ここに一覧されます。

フレーム チャートでの関数詳細の表示