プロファイラー ツールを使用してコードのパフォーマンスを分析する

このコンテンツでは、以前のバージョンの F12 開発者ツールを取り上げています。F12 ツールに関する最新のドキュメントをご覧ください。

F12 ツールには組み込みのスクリプト プロファイラーが用意されており、Windows Internet Explorer 9 で実行される JavaScript コードのパフォーマンスを分析することができます。このトピックでは、このツールの機能と、このツールを使ってスクリプトのパフォーマンスをチェックする方法を説明します。

スクリプトをプロファイリングする

作業を始めるには、プロファイリングするページを Internet Explorer 9 で開きます。Internet Explorer 9 で F12 キーを押して F12 ツールを開き、[プロファイラー] タブをクリックします。

ユーザーはプロファイラーを使ってプロファイリングを開始/停止し、関数とその実行回数や実行に要した時間に関するいくつかのビューやレポートを確認できます。

[プロファイラー] タブを初めてクリックした場合、グリッドは空欄です。ブラウザーでプロファイリングするコードを実行するには、[プロファイリングの開始] ボタンをクリックします。最初に Web ページを読み込んでから開始するには、[最新の情報に更新] をクリックして、ページのコードを実行します。データの収集を停止し、結果を表示するには、[プロファイリングの停止] をクリックします。 コードのセクションだけをプロファイリングするには、[プロファイリングの開始] をクリックし、ブラウザーでそのセクション (ボタンのクリックで呼び出される関数など) を実行して、[プロファイリングの停止] をクリックします。

プロファイル レポートを表示する

[プロファイリングの停止] をクリックすると、プロファイラー ツールからレポートが自動的に生成されます。各プロファイラー セッションは個別のレポートになります。このため、スクリプトの複数のセクションをプロファイリングする場合のように何回もプロファイルを実行したり、値を変更して同じセクションを繰り返しプロファイリングしたりできます。既定では最新のレポートのみが表示されます。[現在のレポート] ドロップダウン リストをクリックして、別のレポートを表示できます。

レポートは、関数順と呼び出しツリー ビューの 2 とおりの方法で表示できます。[関数] ビューには、実行された順にすべての関数が表示されます。[呼び出しツリー] ビューには、関数の階層が表示されます。このため、親子関係を容易に判断できます。

F12 ツールの [プロファイル] タブ ([関数] ビュー) のスクリーン ショット

データ型をプロファイリングする

プロファイラーは、プロファイルから最大で 12 列のデータを返します。レポートでは、列の一番上を右クリックすることで、列を追加または削除できます。 次の表は、利用できるデータを示しています。

列見出し説明
関数プロファイリングされている関数の名称。
回数この関数が呼び出される回数の合計。
包括時間 (ミリ秒)その関数に費やした実行時間。これには、その関数から呼び出された子関数や外部関数での経過時間が含まれます。
包括時間 %その関数に費やした実行時間 (% 表示)。これには、その関数から呼び出された子関数や外部関数での経過時間が含まれます。
排他時間 (ミリ秒)その関数に費やした実行時間。これには、その関数から呼び出された子関数や外部関数での経過時間は含まれません。
排他時間 %その関数に費やした実行時間 (% 表示)。これには、その関数から呼び出された子関数や外部関数での経過時間は含まれません。
平均時間 (ミリ秒)この関数、その子関数、外部関数の平均消費時間。
最大時間 (ミリ秒)この関数、その子関数、外部関数の最大消費時間。
最小時間 (ミリ秒)この関数、その子関数、外部関数の最小消費時間。
関数の種類関数の種類 - DOM、ユーザー、ビルドイン。
URLこの関数を定義したソース ファイルの URL。
行番号ソース コードでこの関数の開始位置がある行番号。

 

包括時間と排他時間から、コード内の問題の兆候を捉えることができます。包括時間は、ある関数の実行時間と、その関数から呼び出された関数や、その関数の子関数から呼び出された関数の実行時間の合計時間を表します。排他時間は、その特定の関数内で実際に経過した時間のみを表します。関数の包括時間が非常に長くなっていながら、排他時間がきわめて短い場合があります。例:



function bar() {
// do some work for a 250 milliseconds
}

function foo() {
// do some work for 200 milliseconds and then call bar()
bar();
}

function main() {
//do some work for 50 milliseconds then call foo()
foo();
}


この例では、50 ミリ秒間動作する関数 "main()" が呼び出されます。この関数は 200 ミリ秒間動作する "foo()" を呼び出します。さらにこの関数が 250 ミリ秒間動作する "bar()" を呼び出すと、動作が完了します。以下の表に、包括時間と排他時間の値を示します。

関数包括時間排他時間
main()500 ミリ秒50 ミリ秒
foo()450 ミリ秒200 ミリ秒
bar()250 ミリ秒250 ミリ秒

 

各関数の包括時間は、関数が実行に要した時間と、その関数から呼び出された関数 (子関数) が実行に要した時間の合計です。排他時間は現在の関数の時間のみです。"bar()" 関数は、チェーンの最後であるため、包括時間と排他時間が等しくなります。

レポートを検索して並べ替える

ツールの右上隅にある F12 ツールの [検索] ボックスで、レポート内の特定の関数を検索できます。[検索] ボックスに名前全体、または名前の一部を入力して、[検索] ボタンをクリックするか Enter キーを押します。該当するすべてのキーワードが強調表示され、レポートは最初の一致までスクロールします。Enter キーと Shift + Enter キー、または [次の結果] ボタンと [前の結果] ボタンをクリックして、一致するキーワードの間を移動できます。

F12 ツールの [次の結果] ボタンと [前の結果] ボタンの画像

[呼び出しツリー] ビューで検索すると、一致する関数の上位の親関数がすべて展開されます。

表示されている任意の列の見出しをクリックすると、そのデータにより並べ替えられます。見出しをもう一度クリックすることで、昇順と降順を切り替えられます。[プロファイラー] タブ内のデータ領域を右クリックして [並べ替え] をクリックしてから、列を選択することもできます。

[呼び出しツリー] レポート ビュー内で並べ替えると、最上位レベルの関数の値のみが並べ替えられます。子関数の階層の順番は変更されません。

レポートのコピーと保存

行を選んで Ctrl + C を押すか、右クリックして [コピー] をクリックすると、プロファイラー レポート内のすべての情報、または一部の情報をコピーできます。すべての行を選択するには、Ctrl + A キーを押してから Ctrl + C キーを押します。

コンマ区切り (.csv) ファイルに直接エクスポートするには、([プロファイリングの開始] ボタンの隣にある) [エクスポート] アイコンをクリックします。エクスポート機能では見出しを含むすべての行が保存されます。コピーと貼り付けでは選択した行のみが含まれ、見出しは含まれません。

関連トピック

F12 開発者ツールで Web ページをデバッグする方法

 

 

表示:
© 2015 Microsoft