ストア アプリでの UI の応答性の分析 (XAML)

  • [アーティクル]

Windows と Windows Phone に適用されます

XAML UI Responsiveness プロファイラーを使用すると、ストア アプリにおける XAML の処理とレンダリングに関連するパフォーマンスの問題を検出し修正することができます。 開始や移動に時間がかかったり、滑らかでないパンやズームや、ユーザー入力の処理の遅れなどが発生する場合には、ツールが問題の分析に役立ちます。

注意

CPU 使用量データとエネルギー消費量データを、XAML UI の応答性データと共に収集し、分析できます。「パフォーマンスと診断のページからの分析ツールの実行」を参照してください。

内容

ユーザー マークの付いたシナリオの指定

アプリケーションの UI の応答性データの収集

インストール済みのアプリケーションの UI の応答性データの収集

UI の応答性データの分析

XAML の応答性の最適化

ユーザー マークの付いたシナリオの指定

また、タイムライン ルーラーの領域を識別できるようにプロファイル データにユーザー マークを追加できます。

タイムライン上のユーザー マーク

マークは、タイムライン上でメソッドが実行された時点に、オレンジ色の三角形として表示されます。 マークの上にマウス ポインターを置くと、メッセージと時刻がツールヒントとして表示されます。 複数のユーザー マークが近接している場合、マークはマージされてツールヒントのデータはまとめられます。 タイムラインの表示を拡大すると、マークを分離できます。

C#、Visual Basic、C++ コードにユーザー マークを追加するには、まず Windows.Foundation.Diagnostics LoggingChannel オブジェクトを作成します。 次に、コード内のマークしたい位置に LoggingChannel.LogMessage メソッドの呼び出しを挿入します。 呼び出しでは、LoggingLevel.Information を使用します。

メソッドが実行されると、ユーザー マークがメッセージと共にプロファイル データに追加されます。

注意

  • Windows.Foundation.Diagnostics.LoggingChannel は Windows.Foundation.IClosable インターフェイス (C# および VB で System.IDisposable として投影) を実装します。オペレーティング システム リソースのリークを防ぐには、ログ チャンネルで終了するときに Dispose() を呼び出します。

  • ログを開く各チャネルには一意の名前が指定されている必要があります。破棄されていないチャンネルと同じ名前の新しいログ チャンネルを作成しようとすると、例外が発生します。

例については、Windows SDK サンプル LoggingSession Sample を参照してください。

アプリケーションの UI の応答性データの収集

Visual Studio デバイス、Visual Studio シミュレーターかエミュレーター、またはリモート デバイスで、アプリの応答性をプロファイリングできます。 「Visual Studio からのストア アプリの実行」を参照してください。 基本的な手順は次のとおりです。

  1. デバッガーの標準ツール バーの [デバッグの開始] ボタンの横にあるドロップダウン リストから、アプリケーションを実行する場所を選択します。

    シミュレーターでの実行

  2. Visual Studio コンピューターとは別のタブレットまたは PC でプロファイリングを行う場合は、リモート プロファイリング用のプロジェクトを構成します。 「リモート マシンでの Visual Studio からの Windows ストア アプリの実行」を参照してください。

  3. [デバッグ] メニューの [パフォーマンスと診断] をクリックします。

    [診断ハブ] で XAML プロファイラーを選択

  4. [XAML UI Responsiveness] をクリックし、[開始] をクリックします。

    注意

    XAML UI Responsiveness プロファイラーを開始したとき、VsEtwCollector.exe を実行するアクセス許可を要求するユーザー アカウント制御ウィンドウが表示される場合があります。[はい] をクリックします。

  5. データを収集するには、アプリを実行します。

    ヒント

    アプリはデバイスで直接実行します。シミュレーターまたはリモート デスクトップ接続で計測されるアプリケーションのパフォーマンスは、デバイスの実際のパフォーマンスを示していないことがあります。

  6. プロファイリングを停止するには、Visual Studio に戻り (Alt + Tab)、[パフォーマンスと診断] ページの [コレクションの停止] をクリックします。

    データ収集の停止

    Visual Studio は、収集されたデータを分析し、結果を表示します。

    XAML UI 応答性レポート ページ

インストール済みのアプリケーションの UI の応答性データの収集

XAML UI Responsiveness プロファイラーは、Visual Studio ソリューションから起動された Window 8.1 ストア アプリまたは Windows ストアからインストールされた Window 8.1 ストア アプリのみで実行できます。 ソリューションを Visual Studio で開いている場合、既定のターゲットは [スタートアップ プロジェクト] です。 開いているソリューションがない場合でも、ローカルまたはリモート デバイスにインストールされているアプリケーションの XAML の応答性をプロファイリングできます。

インストールされているアプリケーションをターゲットにするには:

  1. [ターゲットの変更] を選択し、[インストールされているアプリ] を選択します。

    ターゲット リストを変更する

  2. **リモート プロファイル。**XAML の応答性のプロファイラーをリモート デバイスで実行するには、Visual Studio リモート ツールがインストールされているデバイスで Visual Studio リモート ツールが実行されている必要があります。 「リモート マシンでの Visual Studio からの Windows ストア アプリの実行」を参照してください。

    [インストールされているアプリケーション パッケージの選択] のダイアログ ボックスで、[リモート コンピューター] を選択し、リモート デバイスを指定します。

    リモート デバイス用にインストール済みアプリ パッケージを選択する

  3. [現在のセッションにインストールされているアプリケーション パッケージ] の一覧から対象アプリケーションを選択します。

    [インストール済みアプリ パッケージの選択] ダイアログ ボックス

  4. パフォーマンスと診断のページで [XAML UI Responsiveness] を選択します。

  5. [開始] をクリックして、プロファイリングを開始します。

プロファイリングを停止するには、Visual Studio に戻り (Alt + Tab)、診断ハブのページの [コレクションの停止] をクリックします。

UI の応答性データの分析

Diagnostic session timeline**|UI Thread utilization|Visual throughput (FPS)|Parsing view|**Hot Elements view

プロファイル データを収集した後、次の手順によってコードの分析を開始することができます:

  1. [UI スレッド使用状況] と [ビジュアル スループット (FPS)] のグラフの情報を確認し、タイムラインのナビゲーション バーを使用して、分析する時間の範囲を選択します。

  2. [UI スレッド使用状況] または [ビジュアル スループット (FPS)] グラフの情報を使用して、[解析] または [ホット要素] のビューの詳細を確認し、応答性の問題の原因の可能性を検出します。

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

パフォーマンスと診断のタイムライン

[パフォーマンスと診断] ページの上部のルーラーは、プロファイル情報のタイムラインを示します。 このタイムラインは、[UI スレッド使用状況] グラフと [ビジュアル スループット] グラフの両方に適用されます。 タイムラインのナビゲーション バーをドラッグしてタイムラインのセグメントを選択することにより、レポートのスコープを絞ることができます。

タイムラインにも、挿入したすべてのユーザー マーク、およびアプリケーションのアクティブ化ライフサイクル イベントが表示されます。

UI スレッド使用状況

UI スレッド CPU 使用状況グラフ

[UI スレッド使用状況 (%) ] グラフは、これらのカテゴリの UI スレッドに費やされた相対的な時間を表示します。

[解析]

XAML を解析し、アプリのリソースを取得するために、UI スレッドで費やされた時間を示します。

レイアウト

XAML 要素をレイアウトするために UI スレッドで費やされた時間を示します。

[アプリケーション コード]

解析やレイアウトに関連しないアプリケーション (ユーザー) コードを実行する UI スレッドで費やされた時間を示します。

[その他の Xaml]

XAML ランタイム コードを実行するために、UI スレッドで費やされた時間を示します。

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

ビジュアル スループット折れ線グラフ

[ビジュアル スループット (FPS)] の折れ線グラフは、アプリの UI スレッドとコンポジション スレッドの 1 秒あたりのフレーム数 (FPS) を示します。 EnableFrameRateCounter が有効になっている場合、この値は、アプリのクロムでの表示と同じです。

解析ビュー

解析ウィンドウ

[解析] ビューには XAML ファイルの横棒グラフが含まれており、このタイムラインの選択部分が読み込まれて処理されます。 XAML ファイルのノードの子は、ノード ファイルに含まれるファイルです。 ノードは読み込まれた順番で表示されます。 詳細ペインでは、選択したファイルについて、その値を表示します。

包括値と排他値

排他の期間

このノードで明示的に定義されている要素を処理するためにかかる時間。

包括の期間

このノードおよびすべての子ノードで定義されている要素を処理するためにかかる時間。

UI 要素 (排他)

このノードで明示的に定義された要素の数。

UI 要素 (包括)

このノードとすべての子ノードで明示的に定義された要素の数。

ホット要素ビュー

ホット要素ウィンドウ

[ホット要素] ビューには、すべての要素を示す横棒グラフが含まれており、このタイムラインの選択部分に含まれるレイアウトが処理されます。 要素は、テンプレートによってグループ化され、レイアウトに要した時間によって降順に並べ替えられています。

要素ノードの子は、親ノードの要素に含まれる要素です。 子ノードも、レイアウトに要した時間によって並べ替えられています。 詳細ビューでは、選択された要素の名前とタイミング値を表示します。

XAML の応答性の最適化

「Performance best practices for Windows Store apps using C++, C#, and Visual Basic」のトピックは、アプリのパフォーマンスの最適化に関する情報を見つけるために最適な場所の 1 つです。

XAML のパフォーマンスの最適化に関する考慮点を次に示します:

開始とページ移動の最適化

ページが読み込む XAML、リソース、データ ファイルを注意深く確認することによって、アプリの開始とページ移動を高速化することができます。 XAML ファイルが、ページを最初に読み込む際には不要な多数の UI 要素を作成するか、参照している場合、または参照テンプレートとスタイルが現在のページには適用されないリソース ファイルを読み込んでいる場合、または同じ XAML やリソース ファイルを複数回読み込んでいる場合、アプリが遅く見える場合があります。 これらの問題を解決する方法は、次のトピックの 1 つを参照してください:

パンとスクロールの最適化

パンとスクロールのパフォーマンスの問題は、仮想コンテナーの不使用や、大きく複雑なテンプレートや、カスタムのフレームごとのコールバック メソッドなどの非効率なアルゴリズムによって生じる場合があります。 これらの問題を解決する方法は、次のトピックの 1 つを参照してください:

入力の応答性の最適化

これらの問題を解決する方法は、「Keep the UI thread responsive (Windows Store apps using C#/VB/C++ and XAML)」を参照してください。