Analyze UI responsiveness in Store apps (XAML)
Use the XAML UI Responsiveness profiler for 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.
You can collect and analyze CPU usage data and energy consumption data along with the XAML UI responsiveness data. See Run analysis tools from the Performance and Diagnostic page
You can add user marks to your profiling data to help identify areas in the timeline ruler.
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.
To add a user mark to C#, Visual Basic, C++ code, first create a Windows.Foundation.Diagnostics LoggingChannel object. Then insert calls to LoggingChannel.LogMessage methods at the points in your code that you want to mark. Use LoggingLevel.Information in the calls.
When the method executes, a user mark is added to the profiling data along with a message.
See the Windows SDK Sample LoggingSession Sample for examples.
You can profile the responsiveness of your app on the Visual Studio device, the Visual Studio simulator or emulators, or on a remote device. See Run Store apps from Visual Studio. Here are the basic steps:
Choose where you want to run the app from the drop-down list next to the Start Debugging button on the debugger Standard toolbar.
When you are profiling on a tablet or PC that is not the same as the Visual Studio computer, configure your project for remote profiling. See Run Windows Store apps on a remote machine
On the Debug menu, choose Start Diagnostics Without Debugging.
Choose XAML UI Responsiveness and then choose Start.
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.
Run your app to collect data.
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.
To stop profiling, switch back to Visual Studio (Alt + Tab) and choose Stop collection on the Performance and Diagnostics page.
Visual Studio analyzes the collected data and displays the results.
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:
Choose Change Target and then choose Installed App.
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 Run Windows Store apps on a remote machine.
On the Select Installed App Package dialog box, choose Remote Machine and then specify the remote device.
From the App packages installed for current session list, choose the target app.
Choose XAML UI Responsiveness on the Performance and Diagnostics page.
Choose Start to begin profiling.
To stop profiling, switch back to Visual Studio (Alt + Tab) and choose Stop collection on the Diagnostic hub page.
After you have collected the profiling data, you can use these steps to start your analysis:
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.
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.
Diagnostic session 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 utilization
The UI thread utilization (%) graph displays the relative amount of time spent on the UI thread for these categories:
Indicates time spent on the UI thread parsing XAML and retrieving app resources.
Indicates the time spent on the UI Thread laying out XAML elements.
Indicates time spent on the UI thread executing application (user) code that is not related to parsing or layout.
Indicates time spent on the UI thread executing XAML runtime code.
Visual throughput (FPS)
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 P:Windows.UI.Xaml.DebugSettings.EnableFrameRateCounter is enabled.
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
The time taken to process the elements defined explicitly in this node.
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 view
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 .567BCEFA-5DA5-4E42-A4B8-1358C71ADFA2
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 E8D5CF06-D185-48BD-8701-07BA692582FF