Analyze UI responsiveness in Windows Store apps (XAML)

[This documentation is preliminary and is subject to change.]

Use the XAML UI Responsiveness profiler for Windows Store apps to find and fix performance issues related to XAML processing and rendering. Long startup and navigation times, uneven panning and scrolling, and lags in processing user input are some of the issues that the tool can help you analyze.

When you profile XAML responsiveness from a Visual Studio solution, application lifecycle marks that show you the start and stop times of the app are automatically added to your profiling data. You can also add user marks to help identify areas in the timeline ruler. To add a user mark, insert a call to the LoggingChannel.LogMessage (logMessage in JavaScript) method at the point in your code that you want to mark. When the method executes, a user mark is added to the profiling data along with a message.

User marks in the timeline

The mark appears as an orange triangle in the timeline at the time the method executed. The message and the time are displayed as a tooltip when you hover over the mark. If two or more user marks are close together, the marks are merged and the tooltip data is combined. You can zoom in on the timeline to separate the marks.

Here's how to insert user marks in your code.

\\ set up the logging channel and logging level
var marksLoggingChannel = new Windows.Foundation.Diagnostics.LoggingChannel("UserMarksChannel");
var marksLoggingLevel = Windows.Foundation.Diagnostics.LoggingLevel.Information

\\ add marks to a scenario
void MyScenario()
{
    marksLoggingChannel.LogMessage("Scenario1 Start", marksLoggingLevel);
    \\ scenario code
    marksLoggingChannel.LogMessage("Scenario1 End", marksLoggingLevel);
}

Notes

  • The profiler does not display the LoggingChannel name.

  • The LoggingLevel parameter of the LogMessage must be set to LoggingLevel.Information(LoggingLevel.information in JavaScript).

  • You can create multiple LoggingChannel objects at any scope.

  • You can implement your own tracing and message logging functionality by using objects in the Windows.Foundation.Diagnostics namespace.

    The profiler captures LoggingChannel.LogMessage calls from any LoggingChannel when the LoggingLevel parameter of LogMessage is set to LoggingLevel.Information.

You can profile the responsiveness of your app on the Visual Studio device, the Visual Studio simulator, or on a remote device. See Run Windows Store apps from Visual Studio. Here are the basic steps:

  1. Choose where you want to run the app from the drop-down list next to the Start Debugging button on the debugger Standard toolbar.

    Running in the Simulator
  2. When you are profiling on a device that is not the same as the Visual Studio machine, configure your project for remote profiling. See Profile Visual C++, Visual C#, and Visual Basic code in Windows Store apps on a remote device

  3. On the Debug menu, choose Performance and Diagnostics.

    Choose XAML Profiler in the Diagnostic Hub
  4. Choose XAML UI Responsiveness and then choose Start.

    Note Note

    When you start the XAML UI Responsiveness profiler, you might see a User Account Control window requesting your permission to run VsEtwCollector.exe. Choose Yes.

  5. Exercise your app to collect data.

    Tip Tip

    Run the app directly on the device. The application performance observed on the simulator or through a remote desktop connection might not be indicative of the actual performance on the device.

  6. To stop profiling, switch back to Visual Studio (Alt + Tab) and choose Stop collection on the Performance and Diagnostics page.

    Stop collecting data

    Visual Studio analyzes the collected data and displays the results.

    The XAML UI Responsive report page

The XAML UI Responsiveness profiler can only be run on Window Store 8.1 apps that are launched from a Visual Studio solution or are installed from the Windows store. When a solution is open in Visual Studio, the default target is the Startup Project. You can profile XAML Responsiveness for an installed app on the local or on a remote device without an open solution.

To target an installed app:

  1. Choose Change Target and then choose Installed App.

    Change Target list
  2. Remote profiling. To run the XAML responsiveness profiler on a remote device, the Visual Studio Remote Tools must be installed and running on the device. See Debug and test Windows Store apps on a remote machine from Visual Studio.

    On the Select Installed App Package dialog box, choose Remote Machine and then specify the remote device.

    Select Installed App Package for a remote device
  3. From the App packages installed for current session list, choose the target app.

    Select Installed App Package dialog box
  4. Choose XAML UI Responsiveness on the Performance and Diagnostics page.

  5. Choose Start to begin profiling.

To stop profiling, switch back to Visual Studio (Alt + Tab) and choose Stop collection on the Diagnostic hub page.

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

After you have collected the profiling data, you can use these steps to start your analysis:

  1. 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. Using the information in the UI thread utilization or Visual throughput (FPS) graphs, examine the details in the Parsing or Hot Elements views to discover possible causes for any apparent lack of responsiveness.

Performance and Diagnostics timeline

The ruler at the top of the Performance and Diagnostics page shows the timeline for profiled information. 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 thread CPU utilization graph

The UI thread utilization (%) graph displays the relative amount of time spent on the UI thread for these categories:

Parsing

Indicates time spent on the UI thread parsing XAML and retrieving app resources.

Layout

Indicates the time spent on the UI Thread laying out XAML elements.

App Code

Indicates time spent on the UI thread executing application (user) code that is not related to parsing or layout.

Xaml Other

Indicates time spent on the UI thread executing XAML runtime code.

Visual throughput line graph

The Visual throughput (FPS) line graph shows the frames per second (FPS) on the UI and composition thread for the app. The values are what you would see in the chrome of an app when EnableFrameRateCounter is enabled.

Parsing window

The Parsing view contains a horizontal bar chart of the XAML files that are loaded and processed in the selected portion of the timeline. The children of a XAML file node are files that are included by the node file. Nodes are listed in the order that they were loaded. The details pain displays these values for a selected file.

Inclusive and exclusive values

Duration Exclusive

The time taken to process the elements defined explicitly in this node.

Duration Inclusive

The time taken to process the elements defined in this node and in all child nodes.

UI Elements (Exclusive)

The number of elements defined explicitly in this node.

UI Elements (Inclusive)

The number of elements defined explicitly in this node and in all child nodes.

Hot Elements window

The Hot Elements view contains a horizontal bar graph that represents all the elements that participate in layout during the selected portion on the timeline. The elements are grouped by their template and sorted in descending order by the time they took for layout.

The children of an element node are the elements that are contained by the element of the parent node. Child nodes are also ordered by their layout time. The details view displays name and timing values for a selected element.

One of the best places to look for information about optimizing the performance of your app are topics in Performance best practices for Windows Store apps using C++, C#, and Visual Basic.

Here are some ideas about optimizing XAML performance:

Optimize startup and page navigation

You can speed up your app’s startup and page navigation by carefully examining the XAML, resource, and data files that your pages load. Your app can appear slow if the XAML files create or reference a large number of UI elements that are not needed when the page first loads, if resource files are loaded that reference templates and styles that are not applicable to the current page, or if the same XAML or resource file is loaded more than once. For techniques to address these issues, see one of these topics:

Optimize panning and scrolling

Panning and scrolling performance issues can be caused by not using a virtualizing container, templates that are large and complex, or inefficient algorithms in custom per-frame callback methods. For techniques to address these issues, see one of these topics:

Optimize input responsiveness

For techniques to address these issues, see Keep the UI thread responsive (Windows Store apps using C#/VB/C++ and XAML)

Show:
© 2014 Microsoft. All rights reserved.