VS Codeのエージェントモードを拡張するには、を試してください！

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

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

プロファイルの種類

最適化したい対象に応じて、取得したいプロファイルの種類は異なります。

  • CPU プロファイル - CPU プロファイルは、プログラムが JavaScript の実行中にどこに時間を費やしているかを示します。非同期の Promise やコールバックを待機することはできますが、一度に実行される JavaScript 式は 1 つだけであることを忘れないでください。CPU プロファイルは、毎秒約 10,000 サンプルを収集し、その瞬間にどの式が (もしあれば) 実行されているかを示します。
  • ヒープ プロファイル - ヒープ プロファイルは、プログラム内でメモリが時間とともにどのように割り当てられるかを示します。メモリの割り当てはコストがかかる場合があり、コードが割り当てるメモリの量を減らすことでパフォーマンスの向上が期待できます。
  • ヒープ スナップショット - ヒープ スナップショットは、プログラムがどこにメモリを割り当てたかを瞬時に表示するものです。プログラムが大量の RAM を使用していることに気づき、その原因を突き止めたい場合にヒープ スナップショットが役立ちます。複雑なプログラムの場合、ヒープ スナップショットの収集には数分かかる場合があり、現在、組み込みエディターでのヒープ スナップショットの表示はサポートされていません。

プロファイルの収集

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

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

記録ボタンの使用

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

Screenshot showing the button

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

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

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

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

console.profile の使用

console.profile の呼び出しを使用してコードを手動で計測し、プロファイルを開始し、console.profileEnd でプロファイルを停止できます。これら 2 つの呼び出しサイト間で CPU プロファイルが収集されます。

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

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

プロファイルの分析

テーブル ビュー

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

Screenshot showing the profile table

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

たとえば、次のコードを考えてみましょう。

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

function b() {
  doSomethingFor3Seconds();
}

a();

この場合、a の自己時間は 5 秒、a の合計時間は 8 秒になります。b の自己時間と合計時間は両方とも 3 秒です。ヒープ プロファイルも同様に機能しますが、自己サイズ (Self Size) と合計サイズ (Total Size) を使用して、各関数またはその呼び出し先で割り当てられたメモリ量を示します。

フレーム ビュー

テーブル ビューは特定のケースでは便利ですが、プロファイルのより視覚的な表現を見たい場合がよくあります。これは、テーブル ビューの右上にある炎 🔥 のアイコンをクリックすることで実現できます。まだインストールしていない場合は、フレーム ビュー エディターを提供する追加の拡張機能をインストールするように促されます。

Heap profile flame chart

最初は混乱するかもしれませんが、心配しないでください。これから意味を解き明かしていきます！

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

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

フレーム グラフのエントリをクリックすると、それに関する詳細情報を表示できます。また、マウス ホイールを使用してズームインおよびズームアウトできます。ズームインしている場合は、チャート上の任意の場所をドラッグして移動することもできます。

左ヘビー ビュー

CPU プロファイルを扱っている場合、表示されているフレーム グラフが上記の例ほど理解しやすくない可能性があります。次のような個々のコール スタックが多数存在するかもしれません。

A noisy CPU profile

分析を容易にするために、VS Code はすべての類似したコール スタックをグループ化する「左ヘビー」ビューを提供します。

Toggle button

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

A nicer CPU profile

このビューは、個々の呼び出しは比較的速いかもしれませんが、多数の呼び出しにわたって全体的に最もコストのかかる関数を見つけ出したいサーバーなどの特定のアプリケーションにとって、はるかに便利です。

08/07/2025