UI の応答性の分析 (HTML)

[アーティクル]
06/05/2015

Windows と Windows Phone に適用されます

このトピックでは、アプリのパフォーマンス問題を UI 応答性プロファイラーを使用して切り分ける方法を説明します。 UI 応答性プロファイラーは、Visual Studio 2013 の Windows ストアアプリと Windows Phone アプリで利用できるパフォーマンスツールです。

UI 応答性プロファイラーは、これらの症状で一般的に発生する UI 応答性の問題やプラットフォーム側の効果などの問題を分離しやすくしてくれます。

UI の応答性の不足。 UI スレッドがブロックされると、アプリの応答が遅くなる場合があります。 UI スレッドをブロックする可能性がある原因として、過剰に同期的な JavaScript コード、過剰な CSS レイアウトまたは CSS 計算作業、同期的 XHR 要求、ガベージコレクション、過剰な描画回数、プロセッサ集中型の JavaScript コードなどが挙げられます。
アプリまたはページの読み込みが遅い。この症状は、一般に、リソースの読み込みに時間がかかりすぎている場合に発生します。
ビジュアルの更新頻度が予想よりも少ない。この症状は、UI スレッドの負荷が高すぎて滑らかなフレームレートを維持できなくなった場合に発生します。たとえば、UI スレッドがビジーであるためにコマ落ちが発生することがあります。ネットワーク要求、イメージデコード、描画など、一部の非 UI スレッド作業でも、ビジュアル更新の頻度が制限されることがあります。すべての描画が UI スレッドで処理されるわけではありません。

このトピックの内容

Run the UI Responsiveness Profiler
Isolate an issue
      Isolate a UI responsiveness problem
      Isolate a visual throughput problem
      Mark code for analysis
Analyze data
      View the diagnostic session timeline
      View CPU utilization
      View visual throughput
      View timeline details
      Filter timeline details
      Filter events
      Group events by frame
Save a diagnostic session
Profiler event reference
Additional information

UI 応答性プロファイラーの実行

UI 応答性プロファイラーは、動作中の Windows ストアアプリが、Visual Studio で開かれているか、Windows 8 または Windows 8.1 を実行しているコンピューターにインストールされている場合に使用できます。

UI 応答性プロファイラーを実行するには

アプリを Visual Studio から実行している場合は、[標準] ツールバーの [デバッグの開始] の一覧から、配置ターゲットを選択します (Windows Phone エミュレーターの 1 つ、ローカルコンピューター、シミュレーター、リモートコンピューターなど)。

これらのオプションの詳細については、以下を参照してください。Visual Studio からのストアアプリの実行
[デバッグ] メニューの [パフォーマンスと診断] をクリックします。

プロファイラーの分析ターゲットを変更する場合は、[ターゲットの変更] を選択します。

分析ターゲットに対して、次のオプションを使用できます。
- [スタートアッププロジェクト]。現在のスタートアッププロジェクトを分析するには、このオプションを選択します。アプリをリモートコンピューターまたはデバイスで実行している場合は、既定値であるこの設定を使用する必要があります。
- [実行中のアプリ]。実行中のアプリの一覧から Windows ストアアプリを選択するには、このオプションを選択します。アプリをリモートコンピューターまたはデバイスで実行している場合は、このオプションを使用できません。
  
  このオプションを使用すると、ソースコードにアクセスできないときに、コンピューター上で実行されているアプリのパフォーマンスを分析できます。
- [インストールされているアプリ]。インストールされている Windows ストアアプリを分析用に選択するには、このオプションをクリックします。アプリをリモートコンピューターまたはデバイスで実行している場合は、このオプションを使用できません。
  
  このオプションを使用すると、ソースコードにアクセスできないときに、コンピューターにインストールされているアプリのパフォーマンスを分析できます。このオプションは、自分が開発に携わっていないアプリのパフォーマンスを分析する場合にも便利です。
[使用可能なツール] で [HTML UI の応答性] を選択し、[開始] をクリックします。

ヒント

プロファイラーをエネルギープロファイラー、または CPU サンプリングプロファイラーと組み合わせて実行して、ツールの関連するプロファイラーデータを表示できます。
UI 応答性プロファイラーの開始時に、Visual Studio ETW Collector.exe を実行するためのアクセス許可を要求するユーザーアカウント制御ウィンドウが表示される場合があります。 [はい] をクリックします。

アプリを操作して、関連するパフォーマンスシナリオをテストします。ワークフローの詳細については、以下を参照してください。Isolate a UI responsiveness issue およびIsolate a visual throughput problem.
Alt キーを押しながら Tab キーを押して Visual Studio に切り替えます。
アプリのプロファイリングを停止し、プロファイラーによって収集されたデータを表示するには、[コレクションの停止] をクリックします。

問題の特定

次のセクションでは、パフォーマンス上の問題を特定するのに役立つ方法を示します。サンプルパフォーマンステストアプリを使用してパフォーマンスの問題を識別し、修正する方法の詳しい手順については、以下を参照してください。チュートリアル: UI の応答性の向上 (HTML)

UI の応答性の問題の特定

以下の手順は、UI 応答性プロファイラーをより効果的に使用するために役立つ、推奨されるワークフローです。

Visual Studio でアプリを開きます。
アプリケーションの UI 応答性の問題をテストします。 (Ctrl + F5 キーを押して、デバッグを行わずにアプリケーションを開始します)。

問題を検出したら、テストを続けて、問題が発生している期間を絞り込むか、または問題の動作を引き起こすトリガーを識別します。
Visual Studio に戻り (Alt + Tab キーを押す)、デバッグを停止します (Shift + F5 キーを押す)。
必要に応じて、performance.mark.

ヒント

ユーザーマークは、プロファイラーデータを表示しながら応答性の問題を特定するのに役立ちます。たとえば、応答性の問題の原因となっているコードのセクションの先頭と末尾にユーザーマークを追加できます。
前のセクションの手順に従って、UI 応答性プロファイラーを実行します。
アプリケーションを UI の応答性の問題が生じている状態にします。
Visual Studio に切り替えて (Alt + Tab キーを押して)、UI 応答性プロファイラーのプロファイラータブで [コレクションの停止] をクリックします。
ユーザーマークが追加済みの場合は、プロファイラーのdiagnostics session timeline に表示されます。次の図は、コードで特定の操作を指定するために使用される単一のユーザーマークを示しています。
ユーザーマーク、アプリケーションライフサイクルイベント、グラフ内のデータを使って、タイムラインとプロファイラーグラフで関心のある領域を特定します。グラフのデータの分析と使用に役立つガイドラインを次に示します。
- diagnostics session timeline 」を使用して、user marks、アプリライフサイクルイベント、これらのイベントに関連するタイムライン、他のグラフのデータのタイムラインを表示します。
- CPU utilization graph 」を使用して、CPU アクティビティと、特定の期間内にそれが処理する作業の種類についての一般的な情報を表示します。過剰な CPU アクティビティがある期間には、応答性の問題およびフレームのドロップが発生する場合があります。
- ゲームやリッチメディアアプリを開発する場合は、visual throughput (FPS) graph を使用すると、フレームレートが低下した期間を特定できます。
いずれかのグラフで、グラフの一部をクリックし、ポインターをドラッグして (またはタブキーと方向キーを使って)、関心のある領域を選択します。選択によって期間を指定すると、プロファイラーの下部のペインにあるタイムラインの詳細グラフが、選択された期間だけを表示するように変更されます。

次の図は、関心のある領域を強調表示した、CPU 使用状況グラフを示します。
timeline details graph 」を使用すると、あまりに頻繁に実行されるイベントまたは完了に多くの時間がかかっているイベントに関する詳細情報を取得できます。たとえば、次のものを探します。
- イベントリスナー、タイマー、およびアニメーションフレームのコールバック。特定のイベントに応じて、提供されるデータには変更された DOM 要素の ID、変更された CSS プロパティの名前、ソースの場所へのリンク、関連付けられたイベントまたはコールバック関数の名前が含まれる場合があります。
- window.getComputedStyles の呼び出しなどのレンダリング要素を発生させるレイアウトまたはスクリプトイベント。イベントの関連付けられた DOM 要素が提供されます。
- HTML 解析イベントのスクリプト評価など、アプリケーションによって読み込まれるページまたは URL リソース。ファイル名またはリソースが提供されます。
- で指定されたその他のイベントProfiler event reference.
ヒント

プロファイラーの有益な情報の大部分は、タイムラインの詳細グラフに表示されます。
CPU 使用状況グラフまたはビジュアルスループット (FPS) グラフで領域を選択した状態で [拡大表示] (ボタンまたはコンテキストメニューのどちらか) を選択すると、詳細情報が表示されます。グラフのタイムラインが変更され、選択された期間だけを表示するようになります。
拡大表示の状態で、CPU 使用状況グラフまたはビジュアルスループットグラフの一部を選択します。選択すると、プロファイラーの下部のペインにあるタイムラインの詳細グラフが、選択された期間だけを表示するように変更されます。

ビジュアルスループットの問題の特定

過剰な CPU 使用状況の期間には、フレームレートが低下したり、フレームレートの一貫性がなくなったりする場合があります。リッチメディアアプリやゲームを開発する場合、ビジュアルスループットグラフは、CPU 使用状況グラフより重要なデータを提供する可能性があります。

ビジュアルスループットの問題を特定するには、前のセクションで説明した手順に従います。重要なデータポイントの 1 つとしてビジュアルスループットグラフを使用します。

分析用のコードのマーク

グラフに表示されるデータに関連付けられているアプリコードのセクションを特定しやすくするために、アプリ内に関数呼び出しを追加し、プロファイラーがタイムライン内で関数が実行される時点にユーザーマーク (下向きの三角形) を挿入するように指定します。追加したすべてのユーザーマークが、CPU 使用状況グラフ、ビジュアルスループットグラフ、およびタイムラインの詳細グラフのタイムラインに表示されます。

ユーザーマークを追加するには、アプリに次のコードを追加します。この例では、イベントの説明として "データの取得" を使用します。

if (performance && performance.mark) {
    performance.mark("getting data");
}

このイベントの説明は、ツールヒントとして、ユーザーマークの上にマウスポインターを置くと表示されます。ユーザーマークは必要なだけ追加できます。

注意

console.timeStamp、Chrome のコマンドも、ユーザーマークとしても表示されます。

次の図は、1 つのユーザーマークとツールヒントが表示された診断ルーラーを示しています。

ユーザーマークを表示している診断ルーラー

また、タイムライン詳細表示で、ツールで生成されるイベントを作成して、2 つのユーザーマーク間で経過する期間を表示することもできます。次のコードでは、2 番目のユーザーマークと、2 つのユーザーマークを実行する間に経過する時間の測定値が追加されています (前のコードは最初のユーザーマークを示しています)。

if (performance.mark && performance.measure) {
    performance.mark("data retrieved");
    performance.measure("data measure", "getting data", "data retrieved");
}

2 番目のユーザーマークが指定されていない場合、performance.measure はタイムスタンプを 2 番目のユーザーマークとして使用します。最初のユーザーマークは必須です。

期間の測定値は、[タイムラインの詳細] ビューに [ユーザー測定] イベントとして表示されます。これを選択すると、詳細が表示されます。

タイムラインの詳細ビューでのユーザー測定イベント

データの分析

次のセクションでは、プロファイラーに表示されるデータの解釈に役立つ情報を提供します。

診断セッションのタイムラインの表示

プロファイラーの上部のルーラーは、プロファイル情報のタイムラインを示します。このタイムラインは、[CPU 使用状況] グラフと [ビジュアルスループット] グラフの両方に適用されます。

次に、診断セッションのタイムラインの外観を示します。いくつかのアプリライフサイクルイベントのツールヒントが表示されています。

診断セッションルーラー

タイムラインには、アクティブ化イベントのようなアプリのライフサイクルイベントが発生した日時が示されます。また、コードに追加することができるユーザーマーク (ユーザーマークの三角形) も表示されます。イベントをポイントすると、より多くの情報を含むヒントが表示されます。ユーザーマークの詳細については、このトピックの「Mark code for analysis 」を参照してください。

アプリのライフサイクルイベントは、菱形記号として表示されます。これらは次のような DOM イベントです。

DOMContentLoaded および Load イベント。通常は、コード内のアクティブ化されたイベントハンドラーで発生します。イベントのツールヒントには、特定のイベントと URL が表示されます。
ナビゲーションイベント。別のページに移動するときに発生します。イベントのツールヒントには、移動先ページの URL が表示されます。

CPU 使用率の表示

CPU 使用状況グラフにより、過剰な CPU アクティビティがある期間を特定できます。一定期間内でのアプリの平均 CPU 使用量に関する情報を示します。情報は、特定のカテゴリを表すように色分けされています。カテゴリには、[読み込み中]、[スクリプティング]、ガベージコレクション ([GC])、[スタイル]、[レンダリング]、[イメージデコード中] があります。これらのカテゴリの詳細については、このトピックで後述する「Profiler event reference 」を参照してください。

CPU 使用状況グラフは、1 つまたは複数の CPU の使用率値を 1 つのパーセント値にまとめて、すべてのアプリスレッドに費やされた時間を示します。 CPU 使用率値は、複数の CPU を使用している場合、100% を超えることがあります。

注意

GPU 使用率はグラフに表示されません。

次の例は、CPU 使用状況グラフの外観を示しています。

CPU 使用状況グラフ

このグラフには、次のような用途があります。

問題になる一般的な領域を特定します。
タイムラインの詳細グラフで表示する特定の期間を選択します。期間を選択するには、グラフの一部をクリックし、ポインターをドラッグします。
[拡大] を選択することで、選択した期間のより詳細なビューが表示されます。

グラフの使用について、詳細はこのトピックの「Isolate a UI Responsiveness problem 」を参照してください。

ビジュアルスループット (FPS) の表示

ビジュアルスループットグラフにより、フレームレートが低下した期間を特定できます。ビジュアルスループットグラフは、アプリの 1 秒あたりのフレーム数 (FPS) を示します。このグラフは、ゲームやリッチメディアアプリの開発に最も役立ちます。

表示された FPS の値は、実際のフレームレートとは異なる場合があります。このグラフのデータを確認する場合には、次の情報を考慮します:

このグラフは、アプリが特定の時点で実現可能な FPS を示しています。アプリがアイドル状態のとき、FPS はモニターのリフレッシュレートと同じです。
このグラフは、アプリがビジュアルの更新を要求する作業を行う際の実際の FPS を示しています。
グラフは、フレームがドロップしている (コマ落ちしている) 場合は、ゼロの値を示します。

次の例は、ビジュアルスループットグラフの外観を示しています。

視覚スループットグラフ

ビジュアルスループットグラフには、次のような用途があります。

問題になる一般的な領域を特定します。
タイムラインの詳細グラフで表示する特定の期間を選択します。期間を選択するには、グラフの一部をクリックし、ポインターをドラッグします。
[拡大] を選択することで、選択した期間のより詳細なビューが表示されます。

タイムライングラフの表示

タイムラインの詳細グラフは UI 応答性プロファイラーの下部のペインに表示されます。選択された期間内にどのイベントが最も CPU 時間を消費したかについての順次的または階層的な情報を提供します。このグラフは、何が特定のイベントを発生させたかを判断したり、イベントによっては、どのようにイベントを元のソースコードにマップするかを判断したりするために役立ちます。このグラフは、画面にビジュアルの更新を描画するために必要な時間を判断する際にも役立ちます。

このグラフは、ビジュアルの更新を遅延させる原因となる UI スレッド作業とバックグラウンドスレッド上の作業を表示します。グラフに表示されないのは、JavaScript JIT 作業、非同期 GPU 作業、ホストプロセスの外部で実行される作業 (RuntimeBroker.exe、dwm.exe の作業など)、またはまだプロファイリング用にインストルメント化されていない、Windows ランタイムの領域に対する作業です (ディスク I/O など)。

ヒント

イベントがバックグラウンドスレッドで発生すると、スレッド ID がイベント名の横の角かっこ内に表示されます。

次の例は、DOM クリックイベントのイベントリスナーが選択されたときにタイムラインの詳細グラフがどのように表示されるかを示しています。

タイムライン詳細グラフ

この図では、[イベント名] 列の spinAction イベントハンドラーがリンクになっており、クリックすると、ソースコードのイベントハンドラーが表示されます。右ペインで、Callback function プロパティによってソースコードへの同じリンクが提供されます。他のプロパティも、関連付けられた DOM 要素など、イベントに関する情報を提供します。

CPU 使用状況グラフとビジュアルスループット (FPS) グラフでタイムラインの一部が選択されている場合、タイムラインの詳細グラフは、選択された期間の詳細情報を表示します。

タイムラインの詳細グラフ内のイベントは、CPU 使用状況グラフで表示されるのと同じ作業カテゴリを表すために色分けされています。イベントカテゴリおよび特定のイベントの詳細については、このトピックの「Profiler event reference 」を参照してください。

タイムラインの詳細グラフには、次のような用途があります。

タイムラインとグリッドビューで、イベントのおおよその開始時間、期間、および終了時間を表示します。タイムラインの詳細グラフは、グリッドビューで、拡大の状態に応じて 30 ミリ秒から 30 秒までの範囲の期間を表示できます。期間の値については:
- 包括時間は、子イベントを含むイベントの期間を表します。グリッドビューでは、この値が先に表示されます。
- 排他時間は、子イベントを含まないイベントの期間を表します。グリッドビューでは、この値がかっこ内に表示されます。
イベントの子を表示するには、階層内のイベントを展開します。子イベントは、親イベントによって発生させられた他のイベントです。たとえば、DOM イベントは子として表示されるイベントリスナーを持っている場合があります。イベントリスナーは、結果として、レイアウトイベントのような他のイベントを持っている場合があります。
開始時刻 (既定値) または期間でイベントを並べ替えます。並べ替え方法を選択するには、[並べ替え] の一覧を使用します。
各イベントの詳細は、詳細ウィンドウ (右ペイン) で表示します。プロパティは、以下の例のように、イベントごとに異なります。
- タイマー、イベントリスナー (DOM イベント)、およびアニメーションフレームコールバックでは、Callback function プロパティはイベントハンドラーまたはコールバック関数の名前と共にソースコードの場所へのリンクを提供します。
- タイマー、イベントリスナー (DOM イベント)、レイアウトイベント、およびアニメーションのフレームのコールバックでは、選択されたイベントとそのすべての子の色分けされた概要が [包括時間の概要] セクション (カラーコードされたリング) に表示されます。イメージの色分けされた各スライスは、イベントの種類を表します。イベントの種類の名前は、ツールヒントに表示されます。
ヒント

タイムラインの詳細グラフと [包括時間の概要] は、最適化の対象となる領域を特定するのに役立ちます。これらのビューのいずれかに小さいタスクが数多く表示されている場合、そのイベントは最適化の対象となる可能性があります。たとえば、アプリで DOM 要素が頻繁に更新されているために多数のレイアウトイベントと HTML 解析イベントが発生している場合は、バッチ処理を使用することによってパフォーマンスを最適化できる可能性があります。

タイムラインの詳細のフィルター

特定のイベントのコンテキストメニューの [イベントのフィルター] をクリックして、タイムラインの詳細のビューを特定のイベントにフィルターできます。このオプションを選択すると、タイムラインとグリッドビューは選択されたイベントにスコープされます。 CPU 利用率グラフで選択を行った場合も特定のイベントにスコープされます。

イベントでタイムラインをフィルター処理

イベントのフィルター

あるイベントをタイムラインの詳細グラフから除外して、データのノイズを除去したり、パフォーマンスシナリオで必要のないデータを削除したりできます。フィルタは、イベント名やイベント期間ごとに、またはこのトピックに記載する特定のフィルタで行うことができます。

イメージデコード、予測ダウンロード、および GC イベントを除去するには、下部のペインのフィルターアイコンから**[バックグラウンドアクティビティ]** オプションの選択を解除します。これらのイベントはあまり実用的ではないため、既定では非表示になっています。

タイムライン上のイベントにフィルター処理

HTTP 要求イベントを除去するには、下部のペインのフィルターアイコンから**[ネットワークトラフィック]** オプションの選択を解除します。既定では、これらのイベントはタイムラインの詳細グラフに表示されます。

UI スレッドのアクティビティをフィルターで除去するには、**[UI アクティビティ]**オプションの選択を解除します。

ヒント

ネットワークの待機時間に関する問題を調査するには、このオプションの選択を解除してから、ネットワークトラフィックオプションを選択します。

ユーザー測定をフィルターで除去するには、[ユーザー測定] オプションの選択を解除します。ユーザー測定は、子イベントがないトップレベルイベントです。

フレームごとのグループイベント

[タイムラインの詳細] ビューに表示されるイベントをグループ化して個々のフレームにすることができます。これらのフレームイベントは、ツールで生成されたイベントで、描画イベント間で発生するすべての UI スレッドの作業におけるトップレベルのイベントコンテナーを表しています。このビューを有効にするには、[トップレベルイベントをフレームごとにグループ化する] を選択します。

トップレベルイベントをフレーム別にグループ化

イベントをフレームごとにグループ化する場合、[タイムラインの詳細] ビューにあるトップレベルイベントは、それぞれフレームを表します。

フレーム別にグループ化したタイムラインイベント

診断セッションの保存

Visual Studio では、セッションに関連付けられたタブを閉じるときに、診断セッションを保存できます。保存されたセッションは、後で再度開くことができます。

プロファイラーイベントの参照

プロファイラーイベントは、UI 応答性プロファイラーで、カテゴリごとに色分けされています。以下のイベントカテゴリがあります。

読み込み中。 アプリが初めて読み込まれるときに、アプリのリソースの取得と HTML および CSS の解析に費やされた時間を示します。これには、ネットワーク要求も含まれる場合があります。
スクリプト。 JavaScript の解析と実行に費やされた時間を示します。これには、DOM イベント、タイマー、スクリプトの評価、およびアニメーションのフレームの作業が含まれます。ユーザーコードとライブラリコードの両方が含まれます。
GC。 ガベージコレクションに費やされた時間を示します。
スタイル。 CSS の解析と要素の表示およびレイアウトの計算に費やされた時間を示します。
レンダリング。 画面の描画に費やされた時間を示します。
イメージデコード中。 イメージの伸長とデコードに費やされた時間を示します。

UI 応答性プロファイラーは、スクリプトおよびスタイルのカテゴリに対して、対処可能なデータをタイムラインの詳細グラフで提供する場合があります。スクリプトの問題を問題として特定する場合、UI の応答性プロファイラーで CPU サンプリングプロファイラーを実行できます。また、詳細データを得るために、Visual Studio の関数プロファイラーも使用できます。詳細については、以下を参照してください。ストアアプリにおける JavaScript 関数タイミングデータの分析

他のイベントカテゴリについては、アプリに機能を追加したことによるプラットフォームの副作用を特定できる可能性がありますが、そのような場合、UI 応答性プロファイラーを使用して特定のパフォーマンスの問題を解決できないことがあります。

次の表は、イベントとその説明です。

イベント	イベントのカテゴリ	次の場合に発生します。
CSS 解析	読み込み中	新しい CSS コンテンツが検出され、それを解析しようとしました。
HTML 解析	読み込み中	新しい HTML コンテンツが検出され、それをノードとして解析し、DOM ツリーに挿入しようとしました。
HTTP 要求	読み込み中	リモートリソースが DOM で見つかったか、HTTP 要求が発生する XMLHttpRequest が作成されました。
予測ダウンロード	読み込み中	後でリソースに対する HTTP 要求がすばやくスケジュールできるように、ページの HTML コンテンツで必要なリソースが検索されました。
アニメーションフレームのコールバック関数	スクリプト	ブラウザーが別のフレームを表示しようとしたことにより、アプリで用意されているコールバック関数がトリガーされました。
DOM イベント	スクリプト	DOM イベントが発生し、実行されました。 DOM イベントの context プロパティである DOMContentLoaded や click などは、かっこ内に表示されます。
イベントリスナー	スクリプト	イベントリスナーが呼び出され、実行されました。
メディアクエリリスナー	スクリプト	登録されたメディアクエリは無効化されました。これにより、関連するリスナーが実行されました。
Mutation observer	スクリプト	確認された 1 つ以上の DOM 要素が変更されました。これにより、MutationObserver の関連するコールバックが実行されました。
スクリプトの評価	スクリプト	新しい SCRIPT 要素が DOM で発見され、そのスクリプトを解析し、実行しようとしました。
タイマー	スクリプト	スケジュールされたタイマーの時間になったため、関連付けられているコールバック関数が実行されました。
Windows ランタイムの非同期コールバック関数	スクリプト	Promise コールバック関数をトリガーした非同期操作が、Windows ランタイムオブジェクトによって完了されました。
Windows ランタイムイベント	スクリプト	Windows ランタイムオブジェクトで発生したイベントによって、登録されているリスナーがトリガーされました。
ガベージコレクション	GC	使用されなくなったオブジェクトのメモリを収集するために時間が費やされました。
CSS の計算	スタイル	影響を受けるすべての要素のスタイルプロパティの再計算が必要な変更が DOM に対して行われました。
レイアウト	スタイル	影響を受けるすべての要素のサイズや位置の再計算が必要な変更が DOM に対して行われました。
描画	レンダリング	ビジュアルの変更が DOM に対して行われ、ページの部分を再レンダリングしようとしました。
レンダリングレイヤー	レンダリング	ビジュアルの変更が DOM の個別にレンダリングされるフラグメント (レイヤーと呼ばれます) に対して行われ、ページの部分のレンダリングが必要になりました。
イメージデコード	イメージデコード中	イメージが DOM に含まれていて、それを伸長して元の形式からビットマップにデコードしようとしました。
フレーム	N/A	再描画されるページの影響を受ける部分がすべて必要となる DOM に対する視覚的な変更が行われました。これは、グループ化に使用する、ツールで生成されるイベントです。
ユーザー測定	N/A	performance.measure メソッドを使用して、アプリ固有のシナリオが測定されました。これは、コードの分析に使用する、ツールで生成されるイベントです。

追加情報

UI 応答性プロファイラーについては、この Build 2013 カンファレンスのビデオをご覧ください。
JavaScript を使用して Windows 用にビルドされた Windows ストアアプリのパフォーマンスのヒントを参照します。詳細については、「JavaScript を使った Windows ストアアプリのパフォーマンスのベストプラクティス」を参照してください。
シングルスレッドのコード実行モデルとパフォーマンスについては、「コードの実行」を参照してください。

参照

概念

Visual Studio 診断ツールを使用した Windows ストアアプリのパフォーマンスの分析

次の方法で共有

UI の応答性の分析 (HTML)

UI 応答性プロファイラーの実行

UI 応答性プロファイラーを実行するには

問題の特定

UI の応答性の問題の特定

ビジュアルスループットの問題の特定

分析用のコードのマーク

データの分析

診断セッションのタイムラインの表示

CPU 使用率の表示

ビジュアルスループット (FPS) の表示

タイムライングラフの表示

タイムラインの詳細のフィルター

イベントのフィルター

フレームごとのグループイベント

診断セッションの保存

プロファイラーイベントの参照

追加情報

参照

概念

その他のリソース

次の方法で共有

UI の応答性の分析 (HTML)

UI 応答性プロファイラーの実行

UI 応答性プロファイラーを実行するには

問題の特定

UI の応答性の問題の特定

ビジュアル スループットの問題の特定

分析用のコードのマーク

データの分析

診断セッションのタイムラインの表示

CPU 使用率の表示

ビジュアル スループット (FPS) の表示

タイムライン グラフの表示

タイムラインの詳細のフィルター

イベントのフィルター

フレームごとのグループ イベント

診断セッションの保存

プロファイラー イベントの参照

追加情報

参照

概念

その他のリソース

ビジュアルスループットの問題の特定

ビジュアルスループット (FPS) の表示

タイムライングラフの表示

フレームごとのグループイベント

プロファイラーイベントの参照