Chapter 03

パフォーマンスのプロファイル

lacolaco
lacolaco
2021.05.19に更新

この章ではAngular DevToolsの第2の機能であるパフォーマンスのプロファイリングについて解説します。

この機能でできること

  • Angularの変更検知実行のプロファイリング
  • Angular特有のタイミングを含むパフォーマンス計測

Angularの変更検知実行のプロファイリング

Agnular DevToolsの "Profiler" タブを開くと次のような画面が表示されます。上部にはプロファイリングを開始するためのボタン、その下には外部ファイルにエクスポートされたプロファイルデータをインポートするボタンが表示されています。


Profilerタブ

丸い記録ボタンをクリックすると変更検知実行のプロファイリングが開始され、赤くなった記録ボタンをもう一度クリックすると終了します。画面には記録を開始してから終了するまでにアプリケーション中で実行された変更検知が棒グラフとして表示されます。この棒の長さは変更検知処理にかかった時間を表しています。このプロファイルは変更検知のパフォーマンス改善のためのボトルネックを発見する大きな助けになります。


プロファイリング

棒グラフモード

記録終了後、"Bar chart"モードでは棒グラフの要素をクリックするとそれぞれの変更検知の詳細なプロファイルを見ることができます。画面下部には、コンポーネントごとの変更検知実行を表す横向きの棒グラフが表示されます。この棒グラフの要素をクリックするとさらに詳細な情報が表示されます。次の例では、ボタンのクリックをトリガーにして開始した変更検知がトータルで0.415msかかり、そのうち0.065msが CounterComponent の変更検知によるものだということがわかります。


棒グラフモード

コンポーネント個別のグラフは変更検知が実行されたコンポーネントだけが表示されます。つまり ChangeDetectionStrategy.OnPush により変更検知がスキップされたコンポーネントはここに現れません。棒グラフモードは変更検知が実行されたコンポーネントを一覧し、コンポーネントごとの実行時間の長短を簡単に比較するのに適しています。

フレームグラフモード

画面上部にあるモード選択ドロップダウンリストから"Flame graph"を選択すると、フレームグラフモードでプロファイルを表示できます。棒グラフモードと同じように、グラフ上の要素をクリックすると詳細を確認できます。フレームグラフで表示される情報は棒グラフと大きく変わりませんが、コンポーネントツリー上の階層構造がわかりやすくなっています


フレームグラフモード

フレームグラフモードは棒グラフモードと違い、すべてのコンポーネントツリーが表示されます。"Show only change detection"チェックボックスを有効にすると、実際に変更検知が実行されたコンポーネントだけがハイライトされます。グレーアウトしたコンポーネントの変更検知はスキップされています。フレームグラフは1回の変更検知がどれだけの範囲に影響するのかを俯瞰的に把握し、OnPushを効果的に利用すべき部分を考察するのに適しています。

ツリーマップモード

モード選択で"Tree map"を選択するとツリーマップモードでプロファイルを表示できます。ツリーマップモードではコンポーネントの階層構造が入れ子の矩形で、変更検知の実行時間がその矩形の面積として視覚的に表現されています。矩形をクリックするとその矩形を拡大して内訳が見やすくなります。


ツリーマップモード

ツリーマップは実行時間全体の中で各コンポーネントが占める割合を直感的に理解できるため、ボトルネックの探索に最適です。

プロファイルの保存

記録したプロファイルは"Save Profile"ボタンでJSONファイルとして保存できます。保存したプロファイルは、プロファイル開始画面でファイルを選択して読み込むことができます。

Angular特有のタイミングを含むパフォーマンス計測

Angular DevToolsにはもうひとつパフォーマンスのプロファイリングに関する機能があります。Angular DevToolsの設定オプションから"Enable timing API"を有効にすると、Chrome開発者ツールのパフォーマンス計測に追加の情報が記録されるようになります。

この設定を有効にした状態で開発者ツールの"Performance"タブを開いてプロファイリングを行うと、プロファイルの"Timings"セクションの中にAngular DevToolsが記録した変更検知の開始、終了タイミングや実行時間を表す帯が確認できます。


Angular DevToolsによるTiming情報

変更検知の発生回数やどのコンポーネントがボトルネックになっているかという俯瞰的な分析には向いていませんが、変更検知の実行がアプリケーションの処理全体の中でどのように影響しているかを詳細に調査する際には便利な機能です。