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)) からも実行できます。

その後、VS Codeはどのパフォーマンスプロファイルの種類を取得したいか尋ねます。あなたに関連するものを選択してください。

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

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

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

console.profile の使用

console.profileを呼び出してプロファイルを開始し、console.profileEndを呼び出してプロファイルを停止することで、コードを手動でインスツルメントできます。これら2つの呼び出し地点の間で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秒、aの合計時間は8秒になります。bの自己時間と合計時間は両方とも3秒です。ヒーププロファイルも同様に機能しますが、各関数またはその呼び出し先で割り当てられたメモリ量を示すために自己サイズ(Self Size)と合計サイズ(Total Size)を使用します。

フレームビュー

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

最初はわかりにくいかもしれませんが、ご心配なく、理解できるように説明します！

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

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

フレームグラフのエントリをクリックすると、詳細情報を表示でき、マウスホイールを使用して拡大縮小できます。拡大表示している場合は、グラフ上のどこでもドラッグしてナビゲートすることもできます。

左重みビュー

CPUプロファイルを扱っている場合、ご覧になっているフレームグラフが上記のものほど理解しにくい可能性があります。次のような多くの個別の呼び出し履歴があるかもしれません。

分析を容易にするため、VS Codeはすべての類似する呼び出し履歴をグループ化する「左重みビュー」を提供します。

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

このビューは、個々の呼び出しは比較的速いものの、多くの呼び出し全体で最もコストのかかった関数が何であったかを知りたいサーバーのような特定のアプリケーションにとって、はるかに有用です。