ユニバーサル Windows アプリの HTML UI の応答性を分析するAnalyze HTML UI responsiveness in Universal Windows Apps

このトピックでは、アプリのパフォーマンス問題を UI 応答性プロファイラーを使って切り分ける方法を説明します。UI 応答性プロファイラーは、ユニバーサル Windows アプリで利用できるパフォーマンス ツールです。This topic describes how to isolate performance problems in your apps using the UI Responsiveness Profiler, a performance tool available for Universal Windows Apps.

UI 応答性プロファイラーは、これらの症状で一般的に発生する UI 応答性の問題やプラットフォーム側の効果などの問題を分離しやすくしてくれます。The UI Responsiveness Profiler can help you isolate problems such as UI responsiveness issues or platform side effects that typically occur with these symptoms:

  • UI の応答性の不足。Lack of responsiveness in the UI. UI スレッドがブロックされると、アプリの応答が遅くなる場合があります。The app might be slow to respond if the UI thread is getting blocked. UI スレッドをブロックする可能性がある原因として、過剰に同期的な JavaScript コード、過剰な CSS レイアウトまたは CSS 計算作業、同期的 XHR 要求、ガベージ コレクション、過剰な描画回数、プロセッサ集中型の JavaScript コードなどが挙げられます。Some things that might block the UI thread include excessive synchronous JavaScript code, excessive CSS layout or CSS calculation work, synchronous XHR requests, garbage collection, excessive paint times, or processor-intensive JavaScript code.

  • アプリまたはページの読み込みが遅い。Slow loading time for the app or for a page. この症状は、一般に、リソースの読み込みに時間がかかりすぎている場合に発生します。This is typically caused by excessive time spent loading resources.

  • ビジュアルの更新頻度が予想よりも少ない。Visual updates that are less frequent than expected. この症状は、UI スレッドの負荷が高すぎて滑らかなフレーム レートを維持できなくなった場合に発生します。This occurs if the UI thread is too busy to maintain a smooth frame rate. たとえば、UI スレッドがビジーであるためにコマ落ちが発生することがあります。For example, if the UI thread is busy, frames might be dropped. ネットワーク要求、イメージ デコード、描画など、一部の非 UI スレッド作業でも、ビジュアル更新の頻度が制限されることがあります。Some non-UI thread work such as network requests, image decoding, and paints can also limit the frequency of visual updates. すべての描画が UI スレッドで処理されるわけではありません。(Not all painting is performed on the UI thread.)

HTML UI の応答性ツールの実行Run the HTML UI Responsiveness Tool

HTML UI 応答性ツールは、作業用の UWP アプリが Visual Studio で開かれているときに使用できます。You can use the HTML UI Responsiveness tool when you have a working UWP app open in Visual Studio.

  1. アプリを Visual Studio から実行している場合は、[標準] ツール バーの [デバッグの開始] の一覧から、[ローカル コンピューター] または [デバイス] などの配置ターゲットを選択します。If you're running the app from Visual Studio, on the Standard toolbar, in the Start Debugging list, choose a deployment target such as Local Machine or Device.

  2. [デバッグ] メニューの [パフォーマンス プロファイラー...]をクリックします。On the Debug menu, choose Performance Profiler....

    プロファイラーの分析ターゲットを変更する場合は、[ターゲットの変更]を選択します。If you want to change the analysis target for the profiler, chooseChange Target.

    分析ターゲットを変更するChange analysis target

    分析ターゲットに対して、次のオプションを使用できます。The following options are available for the analysis target:

    • [スタートアップ プロジェクト]Startup Project. 現在のスタートアップ プロジェクトを分析するには、このオプションを選択します。Choose this option to analyze the current startup project. アプリをリモート コンピューターまたはデバイスで実行している場合は、既定値であるこの設定を使用する必要があります。If you're running the app on a remote machine or device, you must use this setting, which is the default value.

    • [実行中のアプリ]Running App. 実行中のアプリの一覧から UWP アプリを選択するには、このオプションをクリックします。Choose this option to select a UWP app from a list of running apps. アプリをリモート コンピューターまたはデバイスで実行している場合は、このオプションを使用できません。You can't use this option when you're running the app on a remote machine or device.

      このオプションを使用すると、ソース コードにアクセスできないときに、コンピューター上で実行されているアプリのパフォーマンスを分析できます。You can use this option to analyze performance of apps that are running on your computer when you don't have access to source code.

    • [インストールされているアプリ]Installed App. インストールされているアプリを分析用に選択するには、このオプションをクリックします。Choose this option to select an installed app that you want to analyze. アプリをリモート コンピューターまたはデバイスで実行している場合は、このオプションを使用できません。You can't use this option when you're running the app on a remote machine or device.

      このオプションを使用すると、ソース コードにアクセスできないときに、コンピューターにインストールされているアプリのパフォーマンスを分析できます。You can use this option to analyze the performance of apps that you have installed on your computer when you don't have access to source code. このオプションは、自分が開発に携わっていないアプリのパフォーマンスを分析する場合にも便利です。This option can also be useful when you just want to analyze the performance of any app outside your own app development.

  3. [使用可能なツール][HTML UI の応答性]を選択し、 [開始]をクリックします。From Available Tools, select HTML UI Responsiveness, and then choose Start.

  4. UI 応答性プロファイラーの開始時に、Visual Studio ETW Collector.exe を実行するためのアクセス許可を要求するユーザー アカウント制御ウィンドウが表示される場合があります。When you start the UI Responsiveness Profiler, a User Account Control window might request your permission to run Visual Studio ETW Collector.exe. [はい]をクリックします。Choose Yes.

    アプリを操作して、関連するパフォーマンス シナリオをテストします。Interact with the app to test the relevant performance scenario. ワークフローの詳細については、以下を参照してください。 UI の応答性の問題の特定 および Isolate a visual throughput problemなど)。For a detailed workflow, see Isolate a UI responsiveness problem and Isolate a visual throughput problem.

  5. Alt キーを押しながら Tab キーを押して Visual Studio に切り替えます。Switch to Visual Studio by pressing Alt+Tab.

  6. アプリのプロファイリングを停止し、プロファイラーによって収集されたデータを表示するには、 [コレクションの停止]をクリックします。To stop profiling the app and view data that the profiler gathered, choose Stop collection.

問題の特定Isolate an issue

次のセクションでは、パフォーマンス上の問題を特定するのに役立つ方法を示します。The following section provides suggestions to help you isolate performance problems. サンプル パフォーマンス テスト アプリを使用してパフォーマンスの問題を識別し、修正する方法の詳しい手順については、「チュートリアル: UI の応答性の向上 (HTML)」を参照してください。For a step-by-step explanation of how to identify and fix performance issues by using a sample performance testing app, see Walkthrough: Improving UI responsiveness (HTML).

UI の応答性の問題の特定Isolate a UI responsiveness problem

以下の手順は、UI 応答性プロファイラーをより効果的に使用するために役立つ、推奨されるワークフローです。These steps provide a suggested workflow that might help you use the UI Responsiveness Profiler more effectively:

  1. Visual Studio でアプリを開きます。Open your app in Visual Studio.

  2. アプリケーションの UI 応答性の問題をテストします。Test your app for UI responsiveness issues. (Ctrl + F5 キーを押して、デバッグを行わずにアプリケーションを開始します)。(Press Ctrl+F5 to start your app without debugging.)

    問題を検出したら、テストを続けて、問題が発生している期間を絞り込むか、または問題の動作を引き起こすトリガーを識別します。If you find an issue, continue testing to try to narrow the time frame in which the issue occurs, or try to identify triggers that cause the behavior.

  3. Visual Studio に戻り (Alt + Tab キーを押す)、デバッグを停止します (Shift + F5 キーを押す)。Switch to Visual Studio (press Alt+Tab) and stop your app (Shift+F5).

  4. 必要に応じて、 分析用のコードのマークなど)。Optionally, add user marks to your code using Mark code for analysis.

    ヒント

    ユーザー マークは、プロファイラー データを表示しながら応答性の問題を特定するのに役立ちます。User marks can help you identify the responsiveness problem while you're viewing profiler data. たとえば、応答性の問題の原因となっているコードのセクションの先頭と末尾にユーザー マークを追加できます。For example, you can add a user mark at the beginning and end of a section of code that is causing a responsiveness issue.

  5. 前のセクションの手順に従って、UI 応答性プロファイラーを実行します。Run the UI Responsiveness Profiler by following the instructions in the previous section.

  6. アプリケーションを UI の応答性の問題が生じている状態にします。Put the app into the state that results in a UI responsiveness issue.

  7. Visual Studio に切り替えて (Alt + Tab キーを押して)、UI 応答性プロファイラーのプロファイラー タブで [コレクションの停止] をクリックします。Switch to Visual Studio (press Alt+Tab) and choose Stop collection in the profiler tab of the UI Responsiveness Profiler.

  8. ユーザー マークが追加済みの場合は、プロファイラーの 診断セッションのタイムラインの表示 に表示されます。If you have added user marks, they will appear in the View the diagnostic session timeline of the profiler. 次の図は、コードで特定の操作を指定するために使用される単一のユーザー マークを示しています。The following illustration shows a single user mark used to specify a particular operation in your code.

    ユーザー マークを表示している診断ルーラーDiagnostics Ruler showing a user mark

  9. ユーザー マーク、アプリケーション ライフ サイクル イベント、グラフ内のデータを使って、タイムラインとプロファイラー グラフで関心のある領域を特定します。Identify an area of interest in the timeline and the profiler graphs by using user marks, app lifecycle events, or data visible in the graphs. グラフのデータの分析と使用に役立つガイドラインを次に示します。Here are some guidelines to help you analyze and use the data in the graphs:

    • 並べ替え方法を選択するには、 診断セッションのタイムラインの表示 」を使用して、 分析用のコードのマーク、アプリ ライフ サイクル イベント、これらのイベントに関連するタイムライン、他のグラフのデータのタイムラインを表示します。Use the View the diagnostic session timeline to view Mark code for analysis, app lifecycle events, and the associated timeline for these events and the timeline for data in the other graphs.

    • CPU utilization graph 」を使用して、CPU アクティビティと、特定の期間内にそれが処理する作業の種類についての一般的な情報を表示します。Use the CPU utilization graph to view general information about CPU activity and the type of work it is handling during a specific period of time. 過剰な CPU アクティビティがある期間には、応答性の問題およびフレームのドロップが発生する場合があります。Periods of excessive CPU activity are more likely to result in responsiveness issues and dropped frames.

    • ゲームやリッチ メディア アプリを開発する場合は、 ビジュアル スループット (FPS) の表示 を使用すると、フレーム レートが低下した期間を特定できます。If you're developing a game or rich media app, use the View visual throughput (FPS) to identify periods of time in which the frame rate dropped.

  10. いずれかのグラフで、グラフの一部をクリックし、ポインターをドラッグして (またはタブ キーと方向キーを使って)、関心のある領域を選択します。Select the area of interest in one of the graphs by clicking a part of the graph and dragging the pointer to make a selection (or by using the Tab key and arrow keys). 選択によって期間を指定すると、プロファイラーの下部のペインにあるタイムラインの詳細グラフが、選択された期間だけを表示するように変更されます。When you select a time period by making a selection, the timeline details graph in the profiler's lower pane changes to show only the selected time period.

    次の図は、関心のある領域を強調表示した、CPU 使用状況グラフを示します。The following illustration shows the CPU utilization graph with an area of interest highlighted.

    CPU 使用状況グラフCPU utilization graph

  11. タイムライン グラフの表示 」 を使用すると、あまりに頻繁に実行されるイベントまたは完了に多くの時間がかかっているイベントに関する詳細情報を取得できます。Use the View timeline details to get detailed information about events that are either running too frequently or taking too much time to complete. たとえば、次のものを探します。For example, look for the following:

    • イベント リスナー、タイマー、およびアニメーション フレームのコールバック。Event listeners, timers, and animation frame callbacks. 特定のイベントに応じて、提供されるデータには変更された DOM 要素の ID、変更された CSS プロパティの名前、ソースの場所へのリンク、関連付けられたイベントまたはコールバック関数の名前が含まれる場合があります。Depending on the specific event, data provided may include the ID of modified DOM elements, the name of modified CSS properties, a link to the source location, and the name of the associated event or callback function.

    • window.getComputedStylesの呼び出しなどのレンダリング要素を発生させるレイアウトまたはスクリプト イベント。Layout or scripting events that resulted in rendering elements, such as calls to window.getComputedStyles. イベントの関連付けられた DOM 要素が提供されます。The associated DOM element for the event is provided.

    • HTML 解析イベントのスクリプト評価など、アプリケーションによって読み込まれるページまたは URL リソース。Pages or URL resources that are loaded by the app, such as script evaluations for HTML parsing events. ファイル名またはリソースが提供されます。The file name or resource is provided.

    • で指定されたその他のイベント Profiler event reference.Other events specified in Profiler event reference.

    ヒント

    プロファイラーの有益な情報の大部分は、タイムラインの詳細グラフに表示されます。Most of the usable information in the profiler appears in the timeline details graph.

  12. CPU 使用状況グラフまたはビジュアル スループット (FPS) グラフで領域を選択した状態で [拡大表示] (ボタンまたはコンテキスト メニューのどちらか) を選択すると、詳細情報が表示されます。With an area selected in the CPU utilization or visual throughput (FPS) graph, choose Zoom in (either the button or context menu) to get more detailed information. グラフのタイムラインが変更され、選択された期間だけを表示するようになります。The timeline for the graph changes to show only the selected time period.

  13. 拡大表示の状態で、CPU 使用状況グラフまたはビジュアル スループット グラフの一部を選択します。When zoomed in, select a portion of the CPU utilization or visual throughput graph. 選択すると、プロファイラーの下部のペインにあるタイムラインの詳細グラフが、選択された期間だけを表示するように変更されます。When you make a selection, the timeline details graph in the profiler's lower pane changes to show only the selected time period.

Isolate a visual throughput problemIsolate a visual throughput problem

過剰な CPU 使用状況の期間には、フレーム レートが低下したり、フレーム レートの一貫性がなくなったりする場合があります。Periods of excessive CPU utilization can result in low or inconsistent frame rates. リッチ メディア アプリやゲームを開発する場合、ビジュアル スループット グラフは、CPU 使用状況グラフより重要なデータを提供する可能性があります。If you develop rich media apps and games, the visual throughput graph may provide more important data than the CPU utilization graph.

ビジュアル スループットの問題を特定するには、前のセクションで説明した手順に従います。 重要なデータ ポイントの 1 つとしてビジュアル スループット グラフを使用します。To isolate a visual throughput problem, follow the steps described in the previous section, but use the visual throughput graph as one of the key data points.

分析用のコードのマークMark code for analysis

グラフに表示されるデータに関連付けられているアプリ コードのセクションを特定しやすくするために、アプリ内に関数呼び出しを追加し、プロファイラーがタイムライン内で関数が実行される時点にユーザー マーク (下向きの三角形) を挿入するように指定します。To help isolate a section of app code that's associated with data that appears in the graphs, you can add a function call in your app that instructs the profiler to insert a user mark—an inverted triangle—in the timeline at the moment the function gets executed. 追加したすべてのユーザー マークが、CPU 使用状況グラフ、ビジュアル スループット グラフ、およびタイムラインの詳細グラフのタイムラインに表示されます。Any user mark that you add appears in the timeline for the CPU utilization graph, the visual throughput graph, and the timeline details graph.

ユーザー マークを追加するには、アプリに次のコードを追加します。To add a user mark, add the following code to your app. この例では、イベントの説明として "データの取得" を使用します。This example uses "getting data" as the description of the event.

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

このイベントの説明は、ツールヒントとして、ユーザー マークの上にマウス ポインターを置くと表示されます。The description of the event appears as a tooltip when you rest the mouse pointer over the user mark. ユーザー マークは必要なだけ追加できます。You can add as many user marks as you need.

注意

console.timeStamp、Chrome のコマンドも、ユーザー マークとしても表示されます。console.timeStamp, a Chrome command, also appears as a user mark.

次の図は、1 つのユーザー マークとツールヒントが表示された診断ルーラーを示しています。The following illustration shows the diagnostics ruler with a single user mark and its tooltip.

ユーザー マークを表示している診断ルーラーDiagnostics Ruler showing a user mark

また、タイムライン詳細表示で、ツールで生成されるイベントを作成して、2 つのユーザー マーク間で経過する期間を表示することもできます。You can also create tool-generated events in the timeline details view to show the duration of time that passes between two user marks. 次のコードでは、2 番目のユーザー マークと、2 つのユーザー マークを実行する間に経過する時間の測定値が追加されています (前のコードは最初のユーザー マークを示しています)。The following code adds a second user mark and a measurement of the time that passes between execution of the two user marks (the preceding code shows the first user mark).

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

2 番目のユーザー マークが指定されていない場合、 performance.measure はタイムスタンプを 2 番目のユーザー マークとして使用します。If the second user mark isn't specified, performance.measure uses a timestamp as the second user mark. 最初のユーザー マークは必須です。The first user mark is required.

期間の測定値は、[タイムラインの詳細] ビューに [ユーザー測定] イベントとして表示されます。 これを選択すると、詳細が表示されます。The duration measurement appears as a User measure event in the timeline details view, and shows detailed information when selected.

タイムラインの詳細ビューでのユーザー測定イベントUser measure event in the timeline details view

データの分析Analyze data

次のセクションでは、プロファイラーに表示されるデータの解釈に役立つ情報を提供します。The following sections provide information to help interpret data that appears in the profiler.

診断セッションのタイムラインの表示View the diagnostic session timeline

プロファイラーの上部のルーラーは、プロファイル情報のタイムラインを示します。The ruler at the top of the profiler shows the timeline for profiled information. このタイムラインは、[CPU 使用状況] グラフと [ビジュアル スループット] グラフの両方に適用されます。This timeline applies to both the CPU utilization graph and the visual throughput graph.

次に、診断セッションのタイムラインの外観を示します。 いくつかのアプリ ライフサイクル イベントのツールヒントが表示されています。Here's what the diagnostic session timeline looks like with a tooltip displayed for several app lifecycle events:

診断セッション ルーラーDiagnostic session ruler

タイムラインには、アクティブ化イベントのようなアプリのライフサイクル イベントが発生した日時が示されます。 また、コードに追加することができるユーザー マーク (ユーザー マークの三角形) も表示されます。The timeline shows when app lifecyle events, like the activation event, occur and it shows user marks (user mark triangles) that you can add to your code. イベントを選択すると、より多くの情報を含むヒントが表示されます。You can select the events to show tooltips with more information. ユーザー マークの詳細については、このトピックの「 分析用のコードのマーク 」を参照してください。For more info about user marks, see Mark code for analysis in this topic.

アプリのライフサイクル イベントは、菱形記号として表示されます。App lifecycle events appear as diamond symbols. これらは次のような DOM イベントです。These are DOM events, which include the following:

  • DOMContentLoaded および Load イベント。 通常は、コード内のアクティブ化されたイベント ハンドラーで発生します。DOMContentLoaded and Load events, which typically occur in the activated event handler in your code. イベントのツールヒントには、特定のイベントと URL が表示されます。A tooltip for the event shows the specific event and the URL.

  • ナビゲーション イベント。 別のページに移動するときに発生します。A navigation event, which occurs when you navigate to a different page. イベントのツールヒントには、移動先ページの URL が表示されます。A tooltip for the event shows the destination page URL.

CPU 使用率の表示View CPU utilization

CPU 使用状況グラフにより、過剰な CPU アクティビティがある期間を特定できます。The CPU utilization graph enables you to identify periods of time in which there is excessive CPU activity. 一定期間内でのアプリの平均 CPU 使用量に関する情報を示します。It provides information about the app's average CPU consumption over a period of time. 情報は、特定のカテゴリを表すように色分けされています。 カテゴリには、 [読み込み中][スクリプティング]、ガベージ コレクション ([GC])、 [スタイル][レンダリング][イメージ デコード中]があります。Information is color-coded to represent the following specific categories: Loading, Scripting, garbage collection (GC), Styling, Rendering, and Image decoding. これらのカテゴリの詳細については、このトピックで後述する「 Profiler event reference 」を参照してください。For more info about these categories, see Profiler event reference later in this topic.

CPU 使用状況グラフは、1 つまたは複数の CPU の使用率値を 1 つのパーセント値にまとめて、すべてのアプリ スレッドに費やされた時間を示します。The CPU utilization graph shows the amount of time spent on all app threads, combining CPU utilization values for one or more CPUs into a single percentage value. CPU 使用率値は、複数の CPU を使用している場合、100% を超えることがあります。The CPU utilization value might exceed 100 percent when more than one CPU is in use.

注意

GPU 使用率はグラフに表示されません。GPU utilization does not appear in the graph.

次の例は、CPU 使用状況グラフの外観を示しています。This example shows what the CPU utilization graph looks like:

CPU 使用状況グラフCPU utilization graph

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

  • 問題になる一般的な領域を特定します。Identify general areas of concern.

  • タイムラインの詳細グラフで表示する特定の期間を選択します。Choose a specific time period to display in the timeline details graph. 期間を選択するには、グラフの一部をクリックし、ポインターをドラッグします。To choose a time period, select a part of the graph and drag the pointer to make a selection.

  • [拡大] を選択することで、選択した期間のより詳細なビューが表示されます。Get a more detailed view of a selected time period by choosing the Zoom in button.

    グラフの使用について、詳細はこのトピックの「 Isolate a UI responsiveness problem 」を参照してください。For more info on using the graph, see Isolate a UI responsiveness problem in this topic.

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

ビジュアル スループット グラフにより、フレーム レートが低下した期間を特定できます。The visual throughput graph enables you to identify periods of time in which the frame rate dropped. ビジュアル スループット グラフは、アプリの 1 秒あたりのフレーム数 (FPS) を示します。It shows the frames per second (FPS) for the app. このグラフは、ゲームやリッチ メディア アプリの開発に最も役立ちます。This graph is most useful for the development of games and rich media apps.

表示された FPS の値は、実際のフレーム レートとは異なる場合があります。The displayed FPS value might differ from the actual frame rate. このグラフのデータを確認する場合には、次の情報を考慮します:Keep this information in mind when examining data in this graph:

  • このグラフは、アプリが特定の時点で実現可能な FPS を示しています。The graph shows the FPS that the app is capable of achieving at any specific time. アプリがアイドル状態のとき、FPS はモニターのリフレッシュ レートと同じです。When the app is idle, the FPS is the same as the monitor refresh rate.

  • このグラフは、アプリがビジュアルの更新を要求する作業を行う際の実際の FPS を示しています。The graph shows the actual FPS if the app is doing work that requires visual updates.

  • グラフは、フレームがドロップしている (コマ落ちしている) 場合は、ゼロの値を示します。The graph shows a value of zero if frames are being dropped.

    次の例は、ビジュアル スループット グラフの外観を示しています。This example shows what the visual throughput graph looks like:

    ビジュアル スループット グラフVisual throughput graph

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

  • 問題になる一般的な領域を特定します。Identify general areas of concern.

  • タイムラインの詳細グラフで表示する特定の期間を選択します。Choose a specific time period to display in the timeline details graph. 期間を選択するには、グラフの一部をクリックし、ポインターをドラッグします。To choose a time period, select a part of the graph and drag the pointer to make a selection.

  • [拡大] を選択することで、選択した期間のより詳細なビューが表示されます。Get a more detailed view of a selected time period by choosing the Zoom in button.

タイムライン グラフの表示View timeline details

タイムラインの詳細グラフは UI 応答性プロファイラーの下部のペインに表示されます。The timeline details graph appears in the lower pane of the UI Responsiveness Profiler. 選択された期間内にどのイベントが最も CPU 時間を消費したかについての順次的または階層的な情報を提供します。It provides sequential and hierarchical information about events that consumed the most CPU time during selected time periods. このグラフは、何が特定のイベントを発生させたかを判断したり、イベントによっては、どのようにイベントを元のソース コードにマップするかを判断したりするために役立ちます。This graph can help you determine what triggered a particular event and, for some events, how the event maps back to source code. このグラフは、画面にビジュアルの更新を描画するために必要な時間を判断する際にも役立ちます。This graph also helps you determine the time required to paint visual updates on the screen.

このグラフは、ビジュアルの更新を遅延させる原因となる UI スレッド作業とバックグラウンド スレッド上の作業を表示します。The graph shows UI thread work and work on background threads that can contribute to slow visual updates. グラフに表示されないのは、JavaScript JIT 作業、非同期 GPU 作業、ホスト プロセスの外部で実行される作業 (RuntimeBroker.exe、dwm.exe の作業など)、またはまだプロファイリング用にインストルメント化されていない、Windows ランタイムの領域に対する作業です (ディスク I/O など)。The graph doesn't show JavaScript JIT work, asynchronous GPU work, work performed outside the host process (such as RuntimeBroker.exe and dwm.exe work), or work for areas of the Windows Runtime that haven't yet been instrumented for profiling (such as disk I/O).

ヒント

イベントがバックグラウンド スレッドで発生すると、スレッド ID がイベント名の横の角かっこ内に表示されます。When an event occurs on a background thread, the thread ID appears in brackets next to the event name.

次の例は、DOM クリック イベントのイベント リスナーが選択されたときにタイムラインの詳細グラフがどのように表示されるかを示しています。This example shows what the timeline details graph looks like when the event listener for a DOM click event is selected:

タイムライン詳細グラフTimeline details graph

この図では、 [イベント名] 列の spinAction イベント ハンドラーがリンクになっており、クリックすると、ソース コードのイベント ハンドラーが表示されます。In this illustration, the spinAction event handler in the Event name column is a link that, when selected, will take you to the event handler in the source code. 右ペインで、 Callback function プロパティによってソース コードへの同じリンクが提供されます。In the right pane, the Callback function property provides the same link to source code. 他のプロパティも、関連付けられた DOM 要素など、イベントに関する情報を提供します。Other properties also provide information about the event, such as the associated DOM element.

CPU 使用状況グラフとビジュアル スループット (FPS) グラフでタイムラインの一部が選択されている場合、タイムラインの詳細グラフは、選択された期間の詳細情報を表示します。If you select a portion of the timeline for the CPU utilization and visual throughput (FPS) graph, the timeline details graph shows detailed information for the selected time period.

タイムラインの詳細グラフ内のイベントは、CPU 使用状況グラフで表示されるのと同じ作業カテゴリを表すために色分けされています。The events in the timeline details graph are color-coded to represent the same categories of work that are shown in the CPU utilization graph. イベント カテゴリおよび特定のイベントの詳細については、このトピックの「 Profiler event reference 」を参照してください。For more info about the event categories and the specific events, see Profiler event reference in this topic.

タイムラインの詳細グラフには、次のような用途があります。Use the timeline details graph to:

  • タイムラインとグリッド ビューで、イベントのおおよその開始時間、期間、および終了時間を表示します。View approximate start times, duration, and end times for an event in a timeline and grid view. タイムラインの詳細グラフは、グリッド ビューで、拡大の状態に応じて 30 ミリ秒から 30 秒までの範囲の期間を表示できます。The timeline details graph can show periods ranging from 30 milliseconds to 30 seconds in the grid view, depending on the zoom state. 期間の値については:For duration values:

    • 包括時間は、子イベントを含むイベントの期間を表します。Inclusive times represent the duration of the event, including the event children. グリッド ビューでは、この値が先に表示されます。In the grid view, this value appears first.

    • 排他時間は、子イベントを含まないイベントの期間を表します。Exclusive times represent the duration of the event, not including the event children. グリッド ビューでは、この値がかっこ内に表示されます。In the grid view, this value appears in parentheses.

  • イベントの子を表示するには、階層内のイベントを展開します。Expand an event in the hierarchy to view children of the event. 子イベントは、親イベントによって発生させられた他のイベントです。The event children are other events that are raised by the parent event. たとえば、DOM イベントは子として表示されるイベント リスナーを持っている場合があります。For example, a DOM event might have event listeners that appear as children. イベント リスナーは、結果として、レイアウト イベントのような他のイベントを持っている場合があります。An event listener might have other events that result from it, like a layout event.

  • 開始時刻 (既定値) または期間でイベントを並べ替えます。Sort events by start time (the default) or duration. 並べ替え方法を選択するには、 [並べ替え] の一覧を使用します。Use the Sort by list to select a sorting method.

  • 各イベントの詳細は、詳細ウィンドウ (右ペイン) で表示します。View details for each event in the details pane (right pane). プロパティは、以下の例のように、イベントごとに異なります。The properties vary depending on the particular event, as these examples show:

    • タイマー、イベント リスナー (DOM イベント)、およびアニメーション フレーム コールバックでは、 Callback function プロパティはイベント ハンドラーまたはコールバック関数の名前と共にソース コードの場所へのリンクを提供します。For timers, event listeners (DOM events), and animation frame callbacks, the Callback function property provides a link to the source code location along with the name of the event handler or callback function.

    • タイマー、イベント リスナー (DOM イベント)、レイアウト イベント、およびアニメーションのフレームのコールバックでは、選択されたイベントとそのすべての子の色分けされた概要が [包括時間の概要] セクション (カラー コードされたリング) に表示されます。For timers, event listeners (DOM events), layout events, and animation frame callbacks, a color-coded summary of the selected event and all its children appear in the Inclusive time summary section (the color-coded ring). イメージの色分けされた各スライスは、イベントの種類を表します。Each color-coded slice of the image represents an event type. イベントの種類の名前は、ツールヒントに表示されます。Tooltips provide the event type name.

    ヒント

    タイムラインの詳細グラフと [包括時間の概要] は、最適化の対象となる領域を特定するのに役立ちます。The timeline details graph and Inclusive time summary can help you identify areas for optimization. これらのビューのいずれかに小さいタスクが数多く表示されている場合、そのイベントは最適化の対象となる可能性があります。If either of these views shows large numbers of small tasks, the event may be a candidate for optimization. たとえば、アプリで DOM 要素が頻繁に更新されているために多数のレイアウト イベントと HTML 解析イベントが発生している場合は、For example, an app may be refreshing DOM elements frequently, resulting in large numbers of layout and HTML parsing events. バッチ処理を使用することによってパフォーマンスを最適化できる可能性があります。You may be able to optimize performance by batching this work.

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

特定のイベントのコンテキスト メニューの [イベントのフィルター] をクリックして、タイムラインの詳細のビューを特定のイベントにフィルターできます。You can filter the view in the timeline details to a particular event by selecting Filter to event from the context menu for a specific event. このオプションを選択すると、タイムラインとグリッド ビューは選択されたイベントにスコープされます。When you choose this option, the timeline and grid view are scoped to the selected event. CPU 利用率グラフで選択を行った場合も特定のイベントにスコープされます。The selection in the CPU utilization graph also scopes to the specific event.

イベントでタイムラインをフィルター処理Filtering timeline to an event

イベントのフィルターFilter events

あるイベントをタイムラインの詳細グラフから除外して、データのノイズを除去したり、パフォーマンス シナリオで必要のないデータを削除したりできます。You can filter out some events from the timeline details graph to reduce noise in the data, or to eliminate data that is not interesting for your performance scenario. フィルタは、イベント名やイベント期間ごとに、またはこのトピックに記載する特定のフィルタで行うことができます。You can filter by event name or event duration, or by specific filters described here.

イメージ デコード、予測ダウンロード、および GC イベントを除去するには、下部のペインのフィルター アイコンから [バックグラウンド アクティビティ] オプションの選択を解除します。To filter out image decoding, speculative downloading, and GC events, clear the Background activity option from the filter icon in the lower pane. これらのイベントはあまり実用的ではないため、既定では非表示になっています。Because these events are not very actionable, they are hidden by default.

タイムライン上のイベントにフィルター処理Filtering events in the timeline

HTTP 要求イベントを除去するには、下部のペインのフィルター アイコンから [ネットワーク トラフィック] オプションの選択を解除します。To filter out HTTP request events, clear the Network traffic option from the filter icon in the lower pane. 既定では、これらのイベントはタイムラインの詳細グラフに表示されます。By default, these events are shown in the timeline details graph.

UI スレッドのアクティビティをフィルターで除去するには、 [UI アクティビティ] オプションの選択を解除します。To filter out UI thread activity, clear the UI activity option.

ヒント

ネットワークの待機時間に関する問題を調査するには、このオプションの選択を解除してから、ネットワーク トラフィック オプションを選択します。Clear this option and select the Network traffic option to investigate issues related to network latency.

ユーザー測定をフィルターで除去するには、 [ユーザー測定] オプションの選択を解除します。To filter out user measures, clear the User measures option. ユーザー測定は、子イベントがないトップレベル イベントです。User measures are top-level events with no children.

フレームごとのグループ イベントGroup events by frame

[タイムラインの詳細] ビューに表示されるイベントをグループ化して個々のフレームにすることができます。You can group events that appear in the timeline details view to individual frames. これらのフレーム イベントは、ツールで生成されたイベントで、描画イベント間で発生するすべての UI スレッドの作業におけるトップレベルのイベント コンテナーを表しています。These frame events are tool-generated events, and represent top-level event containers for all UI thread work that occurs between paint events. このビューを有効にするには、 [トップレベル イベントをフレームごとにグループ化する]を選択します。To enable this view, select Group top level events by frames.

トップレベル イベントをフレーム別にグループ化Group top level events by frame

イベントをフレームごとにグループ化する場合、[タイムラインの詳細] ビューにあるトップレベル イベントは、それぞれフレームを表します。When you group the events by frame, the top-level events in the timeline details view each represent a frame.

フレーム別にグループ化したタイムライン イベントTimeline events grouped by frame

診断セッションの保存Save a diagnostic session

Visual Studio では、セッションに関連付けられたタブを閉じるときに、診断セッションを保存できます。In Visual Studio, you can save a diagnostic session when you close the tab that's associated with the session. 保存されたセッションは、後で再度開くことができます。Saved sessions can be reopened at a later time.

Profiler event referenceProfiler event reference

プロファイラー イベントは、UI 応答性プロファイラーで、カテゴリごとに色分けされています。Profiler events are categorized and color-coded in the UI Responsiveness Profiler. 以下のイベント カテゴリがあります。These are the event categories:

  • 読み込み中。Loading. アプリが初めて読み込まれるときに、アプリのリソースの取得と HTML および CSS の解析に費やされた時間を示します。Indicates time spent retrieving app resources and parsing HTML and CSS when the app first loads. これには、ネットワーク要求も含まれる場合があります。This can include network requests.

  • スクリプト。Scripting. JavaScript の解析と実行に費やされた時間を示します。Indicates time spent parsing and running JavaScript. これには、DOM イベント、タイマー、スクリプトの評価、およびアニメーションのフレームの作業が含まれます。This includes DOM events, timers, script evaluation, and animation frame work. ユーザー コードとライブラリ コードの両方が含まれます。It includes both user code and library code.

  • GC。GC. ガベージ コレクションに費やされた時間を示します。Indicates time spent on garbage collection.

  • スタイル。Styling. CSS の解析と要素の表示およびレイアウトの計算に費やされた時間を示します。Indicates time spent parsing CSS and calculating element presentation and layout.

  • レンダリング。Rendering. 画面の描画に費やされた時間を示します。Indicates time spent painting the screen.

  • イメージ デコード中。Image decoding. イメージの伸長とデコードに費やされた時間を示します。Indicates time spent decompressing and decoding images.

    UI 応答性プロファイラーは、スクリプトおよびスタイルのカテゴリに対して、対処可能なデータをタイムラインの詳細グラフで提供する場合があります。For the script and styling categories, the UI Responsiveness Profiler might provide data that you can act on in the timeline details graph. スクリプトの問題を問題として特定する場合、UI の応答性プロファイラーで CPU サンプリング プロファイラーを実行できます。If you identify scripting issues as a problem, you can run the CPU Sampling profiler with the UI Responsiveness Profiler. また、詳細データを得るために、Visual Studio の関数プロファイラーも使用できます。Alternatively, you could use the Visual Studio function profiler to obtain more detailed data. 詳細については、「 [JavaScript メモリ]の順にクリックします。For more info, see JavaScript Memory.

    他のイベント カテゴリについては、アプリに機能を追加したことによるプラットフォームの副作用を特定できる可能性がありますが、そのような場合、UI 応答性プロファイラーを使用して特定のパフォーマンスの問題を解決できないことがあります。For the other event categories, you might be able to identify platform side effects that result from adding features to your app, but in these cases you might not be able to resolve the particular performance issues by using the UI Responsiveness Profiler.

    次の表は、イベントとその説明です。This table shows the events and their descriptions:

eventEvent イベントのカテゴリEvent category 次の場合に発生します。Occurs when
CSS 解析CSS parsing [読み込み中]Loading 新しい CSS コンテンツが検出され、それを解析しようとしました。New CSS content was encountered and an attempt was made to parse the CSS content.
HTML 解析HTML parsing 読み込み中Loading 新しい HTML コンテンツが検出され、それをノードとして解析し、DOM ツリーに挿入しようとしました。New HTML content was encountered and an attempt was made to parse the content into nodes and insert the content into the DOM tree.
HTTP 要求HTTP request [読み込み中]Loading リモート リソースが DOM で見つかったか、HTTP 要求が発生する XMLHttpRequest が作成されました。A remote resource was found in the DOM, or an XMLHttpRequest was created that resulted in an HTTP request.
予測ダウンロードSpeculative downloading [読み込み中]Loading 後でリソースに対する HTTP 要求がすばやくスケジュールできるように、ページの HTML コンテンツで必要なリソースが検索されました。The page's HTML content was searched for required resources so that subsequent HTTP requests for the resources could be scheduled quickly.
アニメーション フレームのコールバック関数Animation frame callback function [スクリプティング]Scripting ブラウザーが別のフレームを表示しようとしたことにより、アプリで用意されているコールバック関数がトリガーされました。The browser was going to render another frame, and this triggered an app-provided callback function.
DOM イベントDOM event [スクリプティング]Scripting DOM イベントが発生し、実行されました。A DOM event occurred and was executed.

DOM イベントの context プロパティである DOMContentLoadedclickなどは、かっこ内に表示されます。The context property for the DOM event, such as DOMContentLoaded or click, is shown in parentheses.
イベント リスナーEvent listener [スクリプティング]Scripting イベント リスナーが呼び出され、実行されました。An event listener was called and executed.
メディア クエリ リスナーMedia query listener [スクリプティング]Scripting 登録されたメディア クエリは無効化されました。 これにより、関連するリスナーが実行されました。A registered media query was invalidated which resulted in the execution of its associated listener(s).
Mutation observerMutation observer [スクリプティング]Scripting 確認された 1 つ以上の DOM 要素が変更されました。 これにより、MutationObserver の関連するコールバックが実行されました。One or more observed DOM elements were modified, which resulted in the execution of a MutationObserver's associated callback.
スクリプトの評価Script evaluation [スクリプティング]Scripting 新しい SCRIPT 要素が DOM で発見され、そのスクリプトを解析し、実行しようとしました。A new SCRIPT element was found in the DOM, and an attempt was made to parse and execute the script.
タイマーTimer [スクリプティング]Scripting スケジュールされたタイマーの時間になったため、関連付けられているコールバック関数が実行されました。A scheduled timer elapsed, and this resulted in the execution of its associated callback function.
Windows ランタイムの非同期コールバック関数Windows Runtime async callback function スクリプトScripting Promise コールバック関数をトリガーした非同期操作が、Windows ランタイム オブジェクトによって完了されました。An async operation that triggered a Promise callback function was completed by a Windows Runtime object.
Windows ランタイム イベントWindows Runtime event [スクリプティング]Scripting Windows ランタイム オブジェクトで発生したイベントによって、登録されているリスナーがトリガーされました。An event that occurred on a Windows Runtime object triggered a registered listener.
ガベージ コレクションGarbage collection [GC]GC 使用されなくなったオブジェクトのメモリを収集するために時間が費やされました。Time was spent collecting memory for objects that were no longer in use.
CSS の計算CSS calculation [スタイル]Styling 影響を受けるすべての要素のスタイル プロパティの再計算が必要な変更が DOM に対して行われました。Changes were made to the DOM that required the style properties of all affected elements to be recalculated.
レイアウトLayout [スタイル]Styling 影響を受けるすべての要素のサイズや位置の再計算が必要な変更が DOM に対して行われました。Changes were made to the DOM that required the size and/or position of all affected elements to be recalculated.
ペイントPaint [レンダリング]Rendering ビジュアルの変更が DOM に対して行われ、ページの部分を再レンダリングしようとしました。Visual changes were made to the DOM, and an attempt was made to re-render portions of the page.
レンダリング レイヤーRender layer [レンダリング]Rendering ビジュアルの変更が DOM の個別にレンダリングされるフラグメント (レイヤーと呼ばれます) に対して行われ、ページの部分のレンダリングが必要になりました。Visual changes were made to an independently rendered fragment of the DOM (called a layer), and the changes required a portion of the page to be rendered.
[イメージ デコード中]Image decoding [イメージ デコード中]Image Decoding イメージが DOM に含まれていて、それを伸長して元の形式からビットマップにデコードしようとしました。An image was included in the DOM, and an attempt was made to decompress and decode the image from its original format into a bitmap.
フレームFrame N/AN/A 再描画されるページの影響を受ける部分がすべて必要となる DOM に対する視覚的な変更が行われました。Visual changes were made to the DOM that required all affected portions of the page to be redrawn. これは、グループ化に使用する、ツールで生成されるイベントです。This is a tool-generated event used for grouping.
[ユーザー測定]User measure N/AN/A performance.measure メソッドを使用して、アプリ固有のシナリオが測定されました。An app-specific scenario was measured using the performance.measure method. これは、コードの分析に使用する、ツールで生成されるイベントです。This is a tool-generated event used for analyzing code.

追加情報Additional information

参照See Also

プロファイリング ツールProfiling Tools