🚀 VS Code で !

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

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

プロファイルの種類

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

  • CPU プロファイル - CPU プロファイルは、JavaScript でプログラムがどのくらいの時間を費やしているかを示します。非同期プロミスまたはコールバックを待機できますが、一度に実行される JavaScript 式は 1 つだけです。CPU プロファイルは、どの式 (もしあれば) がその瞬間に実行されているかを伝えるために、1 秒あたり約 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 を呼び出してプロファイルを停止することで、コードを手動でインストルメントできます。CPU プロファイルは、これら 2 つの呼び出しサイト間で収集されます。

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

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

プロファイルの分析

テーブルビュー

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

Screenshot showing the profile table

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

たとえば、次のコードを見てください。

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

function b() {
  doSomethingFor3Seconds();
}

a();

この場合、a の自己時間は 5 秒、a の合計時間は 8 秒になります。b の自己時間と合計時間はどちらも 3 秒です。ヒーププロファイルも同じように動作しますが、自己サイズと合計サイズを使用して、各関数またはその呼び出し先で割り当てられたメモリの量を示します。

フレームビュー

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

Heap profile flame chart

最初は混乱するかもしれませんが、恐れることはありません。理解できるようにします。

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

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

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

左ヘビービュー

CPU プロファイルを操作している場合、見ているフレームグラフが上のグラフほどわかりやすくない可能性があります。次のような個々のコールスタックが多数ある場合があります。

A noisy CPU profile

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

Toggle button

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

A nicer CPU profile

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

04/03/2025