The need for a specialized tool<\/h3>\n
Traditional performance analysis has approached \u201cfast\u201d interaction from the perspective of what it would take to get from point A to point B in the least amount of time. In this approach one would look at the activities happening in the code path to say, navigate from page A to page B, and optimize around that. Unfortunately this approach might not work in the case of framework-based applications because the costs that you incur in getting to page B could well be in framework code that is doing work on behalf of the application.<\/p>\n
Getting to \u201cfluid\u201d interactions introduces other complexities. Consider getting to fluid animations – this requires rendering at close to 60 FPS, and at the rate the display hardware needs to refresh the screen once every 16.7 ms. In order to get to fluid animation, the state of the object being animated has be to updated at every such refresh of the screen. This imposes a hard deadline by when any activity being done by the application, or by the framework on behalf of the application, must render to screen.<\/p>\n
The XAML UI Responsiveness tool is a specialized application performance analysis tool being introduced in Visual Studio 2013 for Windows Store based applications to address these interaction-performance concerns.<\/p>\n
Using the XAML UI Responsiveness tool<\/h3>\n
Discovery of the XAML UI Responsiveness tool, and indeed of all the performance and diagnostics tools in Visual Studio has been made easy by aggregating them on a single launch page – the Performance and Diagnostics hub. Launching the hub using \u201cDebug -> Performance and Diagnostics\u201d automatically presents all the tools relevant to the selected analysis target application. The Startup Project is the Analysis target by default.<\/p>\n
![\"clip_image002\"](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2013\/07\/1781.clip_image002_thumb_691F2E9B.png\" "\\"clip_image002\\"")
<\/p>\n
The tool works on applications deployed to run either locally, or in the Simulator, or on a remote machine. The deployment target dropdown allows selection of \u201cLocal Machine\u201d, \u201cSimulator\u201d or \u201cRemote Machine\u201d for this purpose. Profiling on a \u201cRemote Machine\u201d is especially relevant from a performance analysis perspective – one cannot make any assumptions about the hardware on which the application is installed by the consumer, and as an application developer one must strive to ensure consistent performance across the range of supported hardware configurations. To run a profiling session on any remote hardware on which you want to assess performance, Configure remote profiling on the remote device<\/a> and then select \u201cRemote Machine\u201d as target in target selection drop down box.<\/p>\n Select \u201cXAML UI Responsiveness\u201d and click on \u201cStart\u201d to deploy and launch the application and begin a profiling session.<\/p>\n To end the profiling session after exercising the scenario, click either \u201cStop\u201d or \u201cStop collection\u201d.<\/p>\n This will exit the application and present the profiling report (shown below) for analysis.<\/p>\n The tool reports performance in the parlance of elements and various XAML services. Here is a brief introduction of the user interface (we will delve into details in upcoming posts).<\/p>\n \u00a0<\/p>\n Let\u2019s look at the various sections from top to bottom referencing the screenshot above.<\/p>\n (1) Zoom:<\/strong> The Zoom\/Selection controls above the ruler can be used to zoom in\/out of a selected time range. \u201cClear Selection\u201d causes the entire time range to be in scope, and that is the default as well.<\/p>\n (2) Ruler:<\/strong> The Ruler indicates the duration of the scenario. The handles on the ruler can be used to scope the time range over which drill down analysis data is presented. In the present case, notice that the screen shot shows approximately the initial 500 ms as the selected time range.<\/p>\n (3) UI Thread Utilization:<\/strong>The \u201cUI Thread utilization\u201d swim lane reports the load on the UI thread under the broad categories of \u201cParsing\u201d of XAML, \u201cLayout\u201d, application code execution (note that a \u201cPer Frame Callback executes application code), and \u201cXaml Other\u201d which includes activities within the XAML framework for submitting frames for final presentation on screen.<\/p>\n (4) Visual Throughput:<\/strong> The \u201cVisual throughput\u201d swim lane reports the frame rates from the threads bearing the workload of getting your content on screen – the UI thread and the Composition thread.<\/p>\n The bottom half of the user interface presents drill down tabbed views into the information plotted on the UI thread utilization swim lane; in particular about the XAML that was parsed, and the elements that participated in layout.<\/p>\n (5) Parsing:<\/strong> The \u201cParsing\u201d view tab reports the XAML parsed within the selected time range. It comprises of three panes. The left pane represents the hierarchical list of files parsed; i.e. the files that were parsed and the sequence in which they were parsed. Each row represents a file that was parsed, and clicking on a row expands the hierarchy. The middle pane represents the same hierarchy as a Gantt chart illustrating the start, end, and duration of parsing for each of the files. The right pane represents metadata for each selected file. This metadata includes a breakdown of the start\/end time for parsing the file, inclusive\/exclusive durations and inclusive\/exclusive counts for the UI elements instantiated.<\/p>\n (6) Hot Elements:<\/strong> The \u201cHot Elements\u201d view, in the adjacent tab, reports all the elements that participated in layout within the selected time range. It too comprises of three panes. The left pane represents all of the elements that participated in layout, and these elements are grouped by their template and sorted in descending order, so that the costliest group of items float to the top. Clicking on a row expands the group to its constituents. The middle pane represents the layout cost as a horizontal bar graph. For an element group on the left pane, the bar represents cumulative cost of laying out all the constituents of the group. The right pane represents metadata for each selected element or element-group from the left pane. This metadata includes the name of the element (if provided), the name of the file in which the element is found, the name of its template, the number of elements added as a consequence of applying the said template.<\/p>\n The UI Responsiveness tool is a post-mortem profiler, and the various user interface elements as described above can be used to reason about the startup, page navigation, and panning\/scrolling performance of your XAML-based Windows Store application. In upcoming posts we will cover details on how to use the tool and interpret its results, but until such time, to see the tool in action, please take a look at our \/\/build\/ talk titled Visual Studio 2013 Diagnostics Tools for XAML-Based Windows Store Apps<\/a>.<\/p>\n We are really interested in knowing more about what you think about the tool and what you would like to see supported going forward – please let us know via UserVoice<\/a> or Connect<\/a>, and by asking questions in our MSDN diagnostics forum<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":" (Posting for a team mate and friend Pratap Lakshman) \u00a0 From the perspective of interaction-performance applications need to be \u201cfast\u201d and \u201cfluid\u201d – fast to launch, to navigate between pages, to react to changes in orientation, and fluid in scrolling, in panning and in animations. This post introduces the XAML UI Responsiveness tool, a new […]<\/p>\n","protected":false},"author":63,"featured_media":45953,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,225,252],"tags":[],"class_list":["post-9729","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devops","category-git","category-testing"],"acf":[],"blog_post_summary":" (Posting for a team mate and friend Pratap Lakshman) \u00a0 From the perspective of interaction-performance applications need to be \u201cfast\u201d and \u201cfluid\u201d – fast to launch, to navigate between pages, to react to changes in orientation, and fluid in scrolling, in panning and in animations. This post introduces the XAML UI Responsiveness tool, a new […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/9729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/comments?post=9729"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/9729\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media\/45953"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media?parent=9729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/categories?post=9729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/tags?post=9729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"clip_image004\"](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2013\/07\/4442.clip_image004_thumb_2F9C1EA4.png\" "\\"clip_image004\\"")
<\/p>\nElements of the profiling report user interface<\/h3>\n
![\"clip_image006\"](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2013\/07\/0172.clip_image006_thumb_7BF3B245.png\" "\\"clip_image006\\"")
<\/strong><\/p>\n![\"clip_image008\"](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2013\/07\/5850.clip_image008_thumb_66B586D0.png\" "\\"clip_image008\\"")
<\/p>\nIn Closing<\/h3>\n