リソース消費量と UI スレッド アクティビティを分析する (XAML)Analyze Resource Consumption and UI Thread Activity (XAML)

アプリケーション タイムライン プロファイラーを使用すると、XAML アプリケーションにおけるアプリケーションの相互作用に関連するパフォーマンスの問題を検出および修復できます。Use the Application Timeline profiler to find and fix application-interaction related performance issues in XAML applications. このツールは、アプリケーションのリソースの消費量の詳細ビューを提供することで、XAML アプリケーションのパフォーマンスの向上に役立ちます。This tool helps improve the performance of XAML applications by providing a detailed view of the applications' resource consumption. アプリケーションが UI フレームの準備 (レイアウトとレンダリング) やネットワークとディスクの要求の処理を実行することで、およびアプリケーションの起動、ページの読み込み、ウィンドウのサイズ変更などのシナリオにおいて使用した時間を分析することができます。You can analyze the time spent by your application preparing UI frames (layout and render), servicing network and disk requests, and in scenarios like Application Startup, Page Load and Windows resize.

アプリケーション タイムラインは、[デバッグ]、[パフォーマンス プロファイラー] コマンドから開始できるツールの 1 つです。Application Timeline is one of the tools you can start with the Debug / Performance Profiler... command.

このツールは、Visual Studio 2013 の診断ツールセットの一部であった [XAML UI の応答性] ツールから置き換わるものです。This tool replaces the XAML UI Responsiveness tool that was part of the diagnostic toolset for Visual Studio 2013.

このツールは、次のプラットフォームで使用することができます。You can use this tool on the following platforms:

  1. ユニバーサル Windows アプリ (Windows 10 で)Universal Windows apps (on Windows 10)

  2. Windows 8.1Windows 8.1

  3. Windows Phone 8.1 (一般的な XAML プラットフォーム)Windows Phone 8.1 (Common XAML Platform)

  4. Windows Presentation Foundation (.Net 4.0 以上)Windows Presentation Foundation (.Net 4.0 and above)

  5. Windows 7Windows 7

注意

アプリケーション タイムライン データと共に、CPU 使用率データ、エネルギー消費量データを収集して分析できます。You can collect and analyze CPU usage data and energy consumption data along with the ApplicationTimeline data. デバッガーを使用して、または使用せずにプロファイリング ツールを実行する」を参照してください。See Running Profiling Tools with or without the Debugger.

アプリケーション タイムライン データの収集Collect Application Timeline data

ローカル コンピューター、接続されたデバイス、Visual Studio シミュレーターやエミュレーター、またはリモート デバイスでアプリの応答性をプロファイリングすることができます。You can profile the responsiveness of your app on your local machine, connected device, Visual Studio simulator or emulators, or a remote device. デバッガーを使用して、または使用せずにプロファイリング ツールを実行する」を参照してください。See Running Profiling Tools with or without the Debugger.

ヒント

可能な場合には、アプリをデバイス上で直接実行します。If possible, run the app directly on the device. シミュレーターまたはリモート デスクトップ接続で計測されたアプリケーションのパフォーマンスは、デバイス上での実際のパフォーマンスと同じではないことがあります。The application performance observed on the simulator or through a remote desktop connection might not be the same as the actual performance on the device. 一方で、Visual Studio リモート ツールを使用してデータを収集しても、パフォーマンス データには影響は及ぼしません。On the other hand, collecting the data by using the Visual Studio Remote Tools does not affect the performance data.

基本的な手順は次のとおりです。Here are the basic steps:

  1. XAML アプリを開きます。Open your XAML app.

  2. [デバッグ]、[パフォーマンス プロファイラー] の順にクリックします。[.diagsession] ウィンドウにプロファイリング ツールの一覧が表示されます。Click Debug / Performance Profiler.... You should see a list of profiling tools in the .diagsession window.

  3. [アプリケーション タイムライン] を選択してから、ウィンドウの下部にある [開始] をクリックします。Select Application Timeline and then click Start at the bottom of the window.

    注意

    VsEtwCollector.exe を実行するアクセス許可を求める [ユーザー アカウント制御] ウィンドウが表示されることがあります。You might see a User Account Control window requesting your permission to run VsEtwCollector.exe. [はい]をクリックします。Click Yes.

  4. パフォーマンス データを収集するアプリのプロファイリングで関心のあるシナリオを実行します。Run the scenario you are interested in profiling in your app to collect performance data.

  5. プロファイリングを停止するには、.diagsession ウィンドウに切り替えてから、ウィンドウの上部にある [停止] をクリックします。To stop profiling, switch back to the .diagsession window and click Stop at the top of the window.

    Visual Studio が、収集したデータを分析し、結果を表示します。Visual Studio analyzes the collected data and displays the results.

    タイムラインのプロファイラー レポートTimeline profiler report

タイムライン プロファイル データの分析Analyze Timeline profiling data

プロファイル データを収集した後、次の手順によってコードの分析を開始することができます。After you have collected the profiling data, you can use these steps to start your analysis:

  1. [UI スレッド使用状況][ビジュアル スループット (FPS)] のグラフの情報を確認し、タイムラインのナビゲーション バーを使用して、分析する時間の範囲を選択します。Examine the information in the UI thread utilization and Visual throughput (FPS) graphs and then use the timeline navigation bars to select a time range that you want to analyze.

  2. [UI スレッド使用状況] または [ビジュアル スループット (FPS)] のグラフの情報を使用して、[タイムラインの詳細] ビューで詳細を確認し、応答性に問題があるように見受けられる場合は、考えられる原因を究明します。Using the information in the UI thread utilization or Visual throughput (FPS) graphs, examine the details in the Timeline details view to discover possible causes for any apparent lack of responsiveness.

シナリオ、カテゴリ、およびイベントのレポートReport scenarios, categories, and events

[アプリケーション タイムライン] ツールは、XAML のパフォーマンスに関連するシナリオ、カテゴリ、およびイベントのタイミング データを表示します。The Application Timeline tool displays timing data for scenarios, categories, and events that are related to XAML performance.

診断セッションのタイムラインDiagnostic session timeline

パフォーマンスと診断のタイムラインPerformance and Diagnostics timeline

ページの上部にあるルーラーは、プロファイル情報のタイムラインを示します。The ruler at the top of the page shows the timeline for profiled information. このタイムラインは、 [UI スレッド使用状況] グラフと [ビジュアル スループット] グラフの両方に適用されます。This timeline applies to both the UI thread utilization graph and the Visual throughput graph. タイムラインのナビゲーション バーをドラッグしてタイムラインのセグメントを選択することにより、レポートのスコープを絞ることができます。You can narrow the scope of the report by dragging the navigation bars on the timeline to select a segment of the timeline.

タイムラインには、挿入したすべてのユーザー マーク、およびアプリのアクティブ化ライフサイクル イベントも表示されます。The timeline also displays any user marks that you have inserted, and the app's activation lifecycle events.

UI スレッド使用状況グラフUI thread utilization graph

CPU 使用状況グラフCPU Utilization Graph

[UI スレッド使用状況 (%)] グラフは、コレクション期間中にあるカテゴリで費やされた相対的な時間を横棒グラフで示したものです。The UI thread utilization (%) graph is a bar chart that displays the relative amount of time spent in a category for during a collection span.

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

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

[ビジュアル スループット (FPS)] の折れ線グラフは、アプリの UI スレッドとコンポジション スレッドの 1 秒あたりのフレーム数 (FPS) を示します。The Visual throughput (FPS) line graph shows the frames per second (FPS) on the UI and composition thread for the app.

タイムラインの詳細Timeline details

[詳細] ビューは、レポートの分析にほとんどの時間を費やす場所です。The details view is where you will be spending most of your time analyzing the report. UI フレームワーク サブシステムまたは CPU を消費したシステム コンポーネントによってカテゴリ化されるアプリケーションの CPU 使用率の詳細なビューを表示します。It shows a detailed view of CPU utilization of your application categorized by the UI Framework subsystem or the system component that consumed the CPU.

次のイベントがサポートされます。The following events are supported:

解析Parsing XAML ファイルの解析とオブジェクトの作成に費やされた時間。Time spent parsing XAML files and creating objects.

[タイムラインの詳細][解析] ノードを展開すると、ルート イベントの結果として解析されたすべての XAML ファイルの依存関係チェーンが表示されます。Expanding a Parsing node in Timeline details displays the dependency chain of all the XAML files that were parsed as a result of the root event. これにより、パフォーマンスが重要なシナリオにおいて不必要なファイル解析やオブジェクト作成を特定し、それらを取り除いて最適化できます。This will enable you to identify unnecessary file parsing and object creation in performance sensitive scenarios and optimize them out.
レイアウトLayout 大規模なアプリケーションでは、多数の要素が画面に同時に表示される可能性があります。In large applications, thousands of elements may be shown on the screen at the same time. これにより、UI のフレーム レートが低下し、これに対応してアプリケーションの応答性も低下します。This might result in a low UI frame rate and correspondingly poor application responsiveness. レイアウト イベントでは、各要素 (つまり、Arrange、Measure、ApplyTemplate、ArrangeOverride、および ArrangeOverride に費やした時間) をレイアウトするコストを正確に判断するだけでなく、レイアウト パスの一部を成すビジュアル ツリーを作成します。The Layout event accurately determines the cost of laying out each element (i.e. the time spent in Arrange, Measure, ApplyTemplate, ArrangeOverride, and ArrangeOverride) and builds the visual trees that took part in a Layout pass. この視覚表現を使用すると、簡略化が必要な論理ツリーを判断したり、レイアウト パスを最適化するために他の遅延メカニズムを評価したりすることができます。You can use this visualization to determine which of your logical trees needs pruning, or to evaluate other deferral mechanisms to optimize your layout pass.
レンダリングRender XAML 要素を画面に描画するために費やされた時間。Time spent drawing XAML elements to the screen.
入出力I/0 ローカル ディスクから、または Microsoft Windows Internet (WinINet)API を使用してアクセスするネットワーク リソースから、データを取得するために費やされた時間。Time spent retrieving data from the local disk or from network resources that are accessed through the Microsoft Windows Internet (WinINet) API.
アプリケーション コードApp Code 解析やレイアウトに関連しないアプリケーション (ユーザー) コードを実行するために費やされた時間。Time spent executing application (user) code that is not related to parsing or layout.
Xaml その他Xaml Other XAML ランタイム コードの実行に費やされた時間。Time spent executing XAML runtime code.

ヒント

UI スレッドで実行されるアプリ メソッドを表示するためにプロファイリングを開始する場合は、 [CPU 使用率] ツールと共に [アプリケーション タイムライン] ツールを選択します。Choose the CPU Usage tool along with the Application Timeline tool when you start profiling to view app methods that execute on the UI thread. 実行時間の長いアプリ コードをバック グラウンド スレッドに移動すると、UI の応答性が向上します。Moving long-running app code to a background thread can improve UI responsiveness.

タイムラインの詳細のカスタマイズCustomizing Timeline details

[タイムラインの詳細] ツールバーを使用して、[タイムラインの詳細] ビュー エントリの並べ替え、フィルター操作、注釈の指定を行います。Use the Timeline details toolbar to sort, filter, and specify the annotations of Timeline details view entries.

並べ替えSort by 開始時刻またはイベントの長さによって並べ替えます。Sort by start time or the length of events.
フレームごとのグループ イベントGroup events by frame フレームごとにイベントをグループ化する最上位の [フレーム] カテゴリを追加または削除します。Adds or removes a top-level Frame category that groups events by frame.
タイムラインの詳細リストのフィルターFilter Timeline details list 選択したカテゴリまたはイベントの長さに基づいて、一覧をフィルター処理します。Filters the list by selected categories and the length of events.
タイムラインの詳細情報のカスタマイズCustomize Timeline details information イベントに注釈を指定できます。Lets you specify the annotations to events.

参照See Also

WPF Team Blog: New UI Performance Analysis Tool for WPF Applications (WPF チーム ブログ: WPF アプリケーション用の新しい UI パフォーマンス分析ツール)WPF Team Blog: New UI Performance Analysis Tool for WPF Applications
C++、C#、または Visual Basic を使った UWP アプリのパフォーマンスのベスト プラクティス Performance best practices for UWP apps using C++, C#, and Visual Basic
WPF アプリケーションのパフォーマンスの最適化Optimizing WPF Application Performance
Visual Studio のプロファイルProfiling in Visual Studio
プロファイリング機能ツアーProfiling Feature Tour