JavaScript のパフォーマンスプロファイリング

Visual Studio Code は、JavaScript プログラムのパフォーマンスプロファイルの収集と表示をサポートしています。まずは、Node.js プログラム または ブラウザアプリ 用のデバッガーを構成する必要があります。

プロファイルの種類

何を最適化したいかに応じて、取得すべきプロファイルの種類が異なります。

• CPU プロファイル - CPU プロファイルは、プログラムが JavaScript の実行中にどこで時間を費やしているかを教えてくれます。非同期の Promise やコールバックで待機できるとしても、一度に実行される JavaScript 式は一つだけであることに留意してください。CPU プロファイルは毎秒約 10,000 件のサンプルを収集し、その瞬間にどの式が実行されているかを特定します。
• ヒーププロファイル - ヒーププロファイルは、プログラム内でメモリがどのように割り当てられているかを時系列で示します。メモリの割り当てはコストがかかる場合があり、コードが割り当てるメモリ量を削減することでパフォーマンスを向上させることができます。
• ヒープスナップショット - ヒープスナップショットは、プログラムがメモリを割り当てている場所の瞬間的な状態です。プログラムの RAM 使用量が多いと感じ、その原因を調べたい場合にヒープスナップショットが役立ちます。なお、複雑なプログラムではヒープスナップショットの収集に数分かかることがあり、ヒープスナップショットの表示は現在組み込みエディターではサポートされていないことに注意してください。

プロファイルの収集

プロファイルを収集するには、プログラムをデバッグ状態にする必要があります。デバッグが開始されたら、いくつかの方法でプロファイルを収集できます。

• コールスタック ビューの「記録」ボタンを使用する方法。これを使うと、CPU プロファイル、ヒーププロファイル、ヒープスナップショットを取得できます。
• プログラム内で console.profile() を呼び出す方法。これにより CPU プロファイルが収集されます。

記録ボタンの使用

デバッグ中に、「実行とデバッグ」ビュー (⇧⌘D (Windows, Linux Ctrl+Shift+D)) に切り替え、コールスタック ビューを見つけます。デバッグしたいセッションにマウスカーソルを合わせ、パフォーマンスプロファイルの取得 ボタンを選択します。このコマンドは、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) からも実行できます。

VS Code は、どのような種類のパフォーマンスプロファイルを取得するか尋ねてきます。目的に合ったものを選択してください。

最後に、VS Code はいつプロファイルの取得を停止するかを尋ねます。以下のいずれかを選択できます。

• 手動で停止するまでプロファイルを取得する。
• 指定した期間だけプロファイルを取得する。
• 特定のブレークポイントに到達するまでプロファイルを取得する。

最初のオプションを選択した場合、デバッグツールバーに表示される赤い「記録」アイコンをクリックすることでプロファイルを停止できます。プロファイルが収集されると、プロファイルビューアー が自動的に開きます。

console.profile の使用

コード内に console.profile（プロファイル開始）と console.profileEnd（プロファイル終了）の呼び出しを手動で記述して計測することも可能です。これらの呼び出し位置の間で CPU プロファイルが収集されます。

console.profile();
doSomeVeryExpensiveWork();
console.profileEnd();

生成された .cpuprofile ファイルは、自動的にワークスペースフォルダーに保存されます。そのファイルを選択することで、組み込みの プロファイルビューアー で開くことができます。

プロファイルの分析

テーブルビュー

VS Code には、JavaScript の .cpuprofile および .heapprofile ファイルを表示できる統合ビジュアライザーがあります。これらのファイルを開くと、最初は以下のようなテーブルビューが表示されます。

これは、プログラムの ボトムアップ ビューです。各行はプログラム内の関数を表しており、デフォルトでは特定の関数内で費やされた時間でソートされています。これは「セルフタイム (Self Time)」とも呼ばれます。関数の「トータルタイム (Total Time)」は、その関数自身とその関数が呼び出す全関数で費やされた時間の合計です。各テーブル行を展開すると、その関数がどこから呼び出されたかを確認できます。

例として、以下のコードを考えます

function a() {
  doSomethingFor5Seconds();
  b();
}

function b() {
  doSomethingFor3Seconds();
}

a();

この場合、a のセルフタイムは 5 秒、トータルタイムは 8 秒となります。b のセルフタイムとトータルタイムはどちらも 3 秒です。ヒーププロファイルも同様の仕組みですが、各関数またはその呼び出し先で割り当てられたメモリ量を示すために「セルフサイズ (Self Size)」と「トータルサイズ (Total Size)」を使用します。

フレイムビュー

テーブルビューは特定のケースでは便利ですが、プロファイルをより視覚的に把握したいことも多いでしょう。その場合は、テーブルビューの右上にある炎 🔥 アイコンをクリックします。まだインストールしていない場合は、フレイムビューエディターを提供する拡張機能のインストールが求められます。

最初は混乱するかもしれませんが、心配はいりません。すぐに理解できるようになります！

CPU プロファイルの場合、横軸はプロファイルのタイムラインであり、プログラムが各瞬間に何をしていたかを確認できます。ヒーププロファイルの場合、横軸はプログラムによって割り当てられた合計メモリ量です。

グラフ内の各バー（「フレイム」）はコールスタックを表しています。最も外側のトップレベルの関数呼び出し（コールスタックの「底」）がエディターの上部に表示され、それが呼び出す関数はその下に表示されます。バーの幅は、トータルタイムまたは合計メモリによって決定されます。

フレイムグラフ内の項目をクリックすると詳細情報が表示され、マウスホイールでズームイン・ズームアウトが可能です。ズームインしている間は、グラフ上の任意の場所をドラッグして移動することもできます。

左重み付けビュー (Left-heavy view)

CPU プロファイルを扱っている場合、表示されているフレイムグラフが上記ほど直感的ではない可能性があります。以下のような、個々のコールスタックが多数存在する状況かもしれません。

分析を容易にするために、VS Code プロファイルには、類似したコールスタックをすべてグループ化する「左重み付け (left-heavy)」ビューがあります。

これにより、プロファイルの時系列ビューから、ヒーププロファイルに近い表示へと切り替わります。横軸は引き続き合計プロファイル時間ですが、各バーはそのスタックから呼び出された すべて の回数にわたる、その関数呼び出しのトータルタイムを表します。

このビューは、個々の呼び出しは比較的短時間であっても、多数の呼び出し全体で最もコストの高い関数を特定したいサーバーアプリケーションのような場合に非常に役立ちます。