ストア アプリにおける JavaScript 関数タイミング データの分析
このトピックでは、パフォーマンスと診断ハブにある JavaScript 関数タイミング ツールのレポート ビューに表示される JavaScript コードのパフォーマンス データについて説明します。 JavaScript 関数タイミング データを収集するには、次のトピックのいずれかを参照してください。
このトピックの内容
プロファイリング レポート ファイルを開く
プロファイリング データの種類
プロファイル レポート ビューの種類
プロファイリング レポートのビュー
[概要] ビュー
[関数の詳細] ビュー
[コール ツリー] ビュー
[呼び出し元/呼び出し先] ビュー
[モジュール] ビューおよび [関数] ビュー
データ グリッド ビューのカスタマイズ
プロファイリング レポート ファイルを開く
Visual Studio IDE からプロファイリングの実行を停止すると、パフォーマンス データがドキュメントに自動的に表示されます。
VSPerf コマンド ライン ツールによって生成された、または以前のプロファイリング実行の後で保存された、プロファイリング レポート (.vspx) ファイルを開くには、以下を実行します。
必要であれば、Visual Studio を開きます。
[ファイル] メニューの [ファイルを開く] をクリックします。
[ファイルを開く] ダイアログ ボックスで、プロファイル レポート ファイルが保存されているフォルダーに移動し、レポート ファイルを選択します。
プロファイリング データの種類
関数のプロファイリング データには、合計時間、平均時間、最小時間、最大時間、および割合が含まれます。 データは 2 セットのタイミング値に対して計算されます。
[包括経過] 値は、関数を実行するために費やされた時間の合計です。
[排他経過] 値は、その関数のコードのみを実行するために費やされた時間です。 これらの値には、子関数で費やされた時間は含まれません。
プロファイル レポート ビューの種類
プロファイリング レポート ビューでは 2 つの方法でデータが表示されます。
呼び出し先ビューでは、実行パスのコンテキストで関数に関する情報が示されます。 [概要] ウィンドウの [ホット パス] ツリーは、プロファイリングの実行中にアプリケーションが累積的に最も多くの時間を費やした実行パスを示します。 コール ツリー ビューは、プロファイリングの実行に含まれるすべての関数の呼び出し先です。 [関数の詳細] ビューおよび [呼び出し元/呼び出し先] ビューは、選択されている関数に注目して、選択されている関数を呼び出した関数、および選択されている関数が呼び出した関数を表示します。 呼び出し先ビューは、アルゴリズムのパフォーマンス問題を検出するために有用です。
関数リスト ビューは、選択されたデータ列に基づいて関数を並べ替えて表示します。 [概要] ページの [個別作業が一番多い関数] の一覧には、その関数のコードのみを実行するために費やした時間が最も多い関数が表示されます。この時間には、関数が子関数を呼び出すために費やした時間は含まれません。 モジュール ビューは、JavaScript コードのソース ファイルと他の言語のモジュールに基づいて関数をグループ化します。 [関数] ビューにはすべての関数が一覧表示されます。
プロファイリング レポートのビュー
[概要] ビュー
[概要] ページに表示されるプロファイリング データの 2 つのビューを使用すると、パフォーマンスの最適化に最も適した候補がわかることがよくあります。
[ホット パス] ツリーは、プロファイリングの実行中にアプリケーションが累積的に最も多くの時間を費やした呼び出し履歴を示します。 このアルゴリズムに時間がかかっている理由を突き止めることで、最適化できる可能性があります。
[個別作業が一番多い関数] リストには、排他時間を多く使用した上位 10 個の関数が表示されます。 これらの関数のコードを最適化したり、これらの関数の呼び出し回数を減らしたりすることにより、パフォーマンスをすばやく大幅に向上させることができます。
[関数の詳細] ビュー
[コスト配分] 棒グラフでは、選択した関数とそれを実行した呼び出し元関数の間の関係、および選択した関数とそれが呼び出している関数の間の関係が表示されます。
[呼び出す関数] バーには、選択した関数を呼び出した関数が表示されます。 呼び出し元関数ブロックのサイズは、選択した関数の合計実行時間に対する、その呼び出し元関数による時間の割合を示します。
[選択した関数] バーでは、選択した関数がそれ自体のコードの実行に費やした合計実行時間の相対的な大きさ ([関数本体] ブロック)、および選択した関数から呼び出された関数の実行に費やされた時間の大きさが示されます。
[呼び出される関数] バーは、選択した関数によって呼び出された関数が表示されます。 呼び出し先関数ブロックのサイズは、呼び出し先関数の合計実行時間に対する、その呼び出し先関数で費やされた時間の割合を示します。
[コール ツリー] ビュー
[コール ツリー] ビューを使用すると、アプリで走査された関数の実行パスを調べることができます。 ツリーのルートは、アプリへのエントリ ポイントです。 各関数ノードは、呼び出したすべての関数と、その関数呼び出しに関するパフォーマンス データを表示します。 コール ツリー ビュー内の関数の値は、コール ツリー内の親関数から呼び出された関数のインスタンスに対応します。 パーセンテージの値は、プロファイル実行の総実行時間に対する、関数インスタンスの時間の値の比です。
[コール ツリー] ビューの 1 つのノードに注目するには、ノードを選択し、ショートカット メニューの [ルートの設定] をクリックします。 ルート ノードを設定すると、選択したノードのサブツリーを除く他のすべてのエントリはビューから除外されます。 ルート ノードを元のノードにリセットするには、ショートカット メニューの [ルートのリセット] をクリックします。
[コール ツリー] ビューの列
列名 |
説明 |
---|---|
[呼び出し数] |
コール ツリーの親関数によるこの関数の呼び出し回数。 |
[包括経過時間 %] |
この関数を実行するために費やされた実行時間の総割合。 |
[排他経過時間 %] |
関数の本体を実行するために費やされた実行時間の総割合。 この関数が呼び出した関数を実行するために費やされた時間は含まれません。 |
[平均経過時間 (子を含む)] |
この関数を実行するために費やされた平均時間。 |
[平均経過時間 (関数のみ)] |
この関数を実行するために費やされた平均時間。 この関数が呼び出した関数を実行するために費やされた時間は含まれません。 |
[モジュール名] |
JavaScript 関数では、関数を含むソース ファイルの名前。 それ以外の場合は、関数を含むモジュール (.dll または .exe) の名前。 |
[呼び出し元/呼び出し先] ビュー
呼び出し元/呼び出し先ビューは、すべてのタイミングの詳細を含む概要ビューの関数詳細コスト配分棒グラフに含まれるデータのツリー表現です。 [呼び出し元/呼び出し先] ビューは、選択した関数を呼び出した関数と、選択した関数が呼び出した関数の関係を調べる場合に使用します。 [呼び出し元/呼び出し先] ビューは、3 つのグリッドで構成されます。
中央のグリッドに表示される [現在の関数] では、選択した関数に関するプロファイル情報が示されます。 値には、この関数に対するすべての呼び出しが含まれます。 [現在の関数を呼び出した関数] は上部のグリッドに表示され、[現在の関数によって呼び出された関数] は下部のグリッドに表示されます。 現在の関数の値は、この関数に対するすべての呼び出しの合計です。 呼び出し元関数と呼び出し先関数の値には、選択した関数が呼び出し先関数を呼び出すために費やした時間と、選択した関数が呼び出し元関数によって呼び出されるために費やした時間が含まれます。
関数のコール ツリー内を移動するには、呼び出し元関数または呼び出し先関数をダブルクリックします。 ダブルクリックした関数が、新しい選択した関数になります。 その呼び出し元関数と呼び出し先関数が表示されます。
[呼び出し元/呼び出し先] ビューの列
列名 |
説明 |
---|---|
[呼び出し数] |
|
[包括経過時間 %] |
|
[排他経過時間 %] |
|
[平均経過時間 (子を含む)] |
|
[平均経過時間 (関数のみ)] |
|
[モジュール名] |
JavaScript 関数では、関数を含むソース ファイルの名前。 それ以外の場合は、関数を含むモジュール (.dll または .exe) の名前。 |
[モジュール] ビューおよび [関数] ビュー
[モジュール] ビューおよび [関数] ビューには、プロファイル レポートでの関数のプロファイリング データの詳細が表示されます。 モジュール ビューでは、JavaScript 関数を含む .js ソース ファイルによってその関数を整理します。 他の関数は .dll などのモジュールごとに一覧表示されます。 [関数] ビューでは、階層を使用しないですべての関数が一覧表示されます。 特定のコードを探すには [関数] ビューより [モジュール] ビューの方が一般に容易ですが、関数を比較する場合は [関数] ビューの方が簡単な場合があります。
[モジュール] ビューおよび [関数] ビューの列
列名 |
説明 |
---|---|
[呼び出し数] |
この関数の呼び出し回数。 |
[包括経過時間 %] |
この関数を実行するために費やされた総実行時間のプロファイルの実行時間に対する割合。 |
[排他経過時間 %] |
この関数を実行するために費やされた総実行時間の割合。 この値には、この関数によって呼び出された関数で費やされた時間は含まれません。 |
[平均経過時間 (子を含む)] |
この関数の平均実行時間。 |
[平均経過時間 (関数のみ)] |
この関数の平均実行時間。 この値には、この関数によって呼び出された関数を実行するために費やされた時間は含まれません。 |
[モジュール名] |
JavaScript 関数では、関数を含むソース ファイルの名前。 それ以外の場合は、関数を含むモジュール (.dll または .exe) の名前。 |
データ グリッド ビューのカスタマイズ
データ列を追加または削除したり、列の表示順序を変更したりできます。 データ行を右クリックし、[列の追加/削除] をクリックします。
注意
マネージ コードとネイティブ コードに対してインストルメンテーション メソッドを使用した場合は、コードの実行に関する追加情報が収集され、[アプリケーション包括] と [アプリケーション排他] のタイミング フィールドに表示されます。この情報は JavaScript では収集できないため、[アプリケーション] 値は [経過時間] 値と同じになります。これらのフィールドはビューに追加しないことをお勧めします。
その他のプロファイリング データ列
列名 |
説明 |
---|---|
[関数名] |
関数の名前。 |
[関数アドレス] |
関数のアドレス。 |
[関数行番号] |
ソース ファイルでのこの関数の開始行番号です。 |
[呼び出し数] |
この関数に対する呼び出しの合計。 |
[ソース ファイル] |
この関数の定義を含むソース ファイルです。 |
[モジュール名] |
関数を含むモジュールの名前です。 |
[モジュール パス] |
関数を含むモジュールのパスです。 |
[プロセス ID] |
プロファイリング実行のプロセス ID (PID) です。 |
[プロセス名] |
プロセスの名前です。 |
[プローブ オーバーヘッド時間 (関数のみ)] |
インストルメンテーションによって発生したこの関数のオーバーヘッド時間。 この関数によって呼び出された関数のオーバーヘッドは含まれません。 プローブ オーバーヘッドはすべての排他時間から減算されています。 |
[プローブ オーバーヘッド時間 (子を含む)] |
インストルメンテーションによって発生したこの関数とその子関数のオーバーヘッド時間。 この関数によって呼び出された関数のオーバーヘッドが含まれます。 プローブ オーバーヘッドはすべての包括時間から減算されています。 |
[経過時間 (関数のみ)] |
この関数に対するすべての呼び出しの排他経過時間の合計。 |
[最大経過時間 (関数のみ)] |
この関数に対する呼び出しの最大排他経過時間。 |
[最小経過時間 (関数のみ)] |
この関数に対する呼び出しの最小排他経過時間。 |
[経過時間 (子を含む)] |
この関数に対するすべての呼び出しの包括経過時間の合計。 |
[最大経過時間 (子を含む)] |
この関数に対する呼び出しの最大包括経過時間。 |
[最小経過時間 (子を含む)] |
この関数に対する呼び出しの最小包括経過時間。 |