App performance: The mental model for interacting with the platformLalithra FernandoProgram Manager, Windows Fundamentals3-097

FastFluidAnalysis approach

Agenda

Our customers’ experience is affected by the performance of their apps

Follow the Performance Journey

Where are we in the performance journey?

ThePerformanceJourney

Design &plan

Architect &develop Instrument Test &

Measure Analyze

Design for performance

Deliver consistent performance

IntroductionDevelop the fundamental insight to deliver fast and fluid apps

Our approachBuild the mental model – this talk!Use the tools (WPT) – next talk!• See the complexities of your app’s interaction with the platform

Critical pathUI framework

Fast

From A to B in minimal time… Launch, navigation, resize…Fast

Critical path analysis and optimizationIdentify critical pathLook at the big picture

Identify each phase on the critical pathUse instrumentation or existing events

Drill down in each phase on the critical pathWhich resource is your app blocked on? CPU, disk, GPU, network…Any other delays?

Optimize

Critical path

Launch critical path example

Start Check for updates

Enumerate comics

Build display

Decode images Done

OptimizeFor each phase, ask yourself…

Can we not do it? EliminateCan we do it earlier? Cache, persistCan we do it later or in parallel? QueueCan we do it more efficiently? Batch, hash

Start Check for updates

Check for comic

changesBuild

displayDecode images Done

Optimized launch critical path example

Start Check for updates

Check for comic

changesBuild

displayDecode images Done

Optimized launch critical path example

Check for updatesDo it later!

Enumerate comicsNot done! Cache and persist

Decode imagesDo it earlier, in parallel, faster!(Quick list extract, smaller images)

Build display listDo it faster!(Less complex, virtualized)

UI framework on critical pathWhat is the system doing at the request of your app?

App code

System

More app code

UI framework fundamentalsUI threadKey to responsivenessSpends time completing framework tasks on behalf of your app

Element treeItems in your app are contained in this object model

UI framework - element tree

Body

Container

ImageList

Body

Container

Image List

Item

Item

Item

…

Framework tasks

UI framework display pipelineLoading, parsing, and building element tree/object model

Formatting (styles) and layoutCompute formats, apply templatesMeasure and arrangeBuild display for hit testing and rasterization

Display/rasterizationWalk tree, rasterize to target layers

CompositionWalk visual tree to render to primary and present

UI framework invalidationsContent on the screen is invalidCaused by input, events, object model manipulationsMust go through portions of the display pipeline again

Invalidations vary in scopeEntire screen – navigate to a new pageMore contained – display new mail, highlight a list item

Generates costly recalculationsDirtiness may propagate to parents, siblings, children

UI framework invalidations - examplesBody

ContainerImage

List

Format invalidationFont change

Body

ContainerImage

List

Layout invalidation Width change in flow

Body

ContainerImage

ListItem

Display invalidation Color change

Body

ContainerImage

List

Composition invalidation Opacity change

Managing UI framework costsComplex UI Unnecessary invalidations

Managing UI framework costsReduce complexityNumber of elementsTemplatesText and flow considerationsAvoid complex layouts (e.g. flex)Content virtualization

Maximize batching and schedulingUnderstand every paint and layout calculation on the critical pathStage changes outside of the live element treeCommit the changes in intentional and large chunks to reduce calculations

Isolate dirtinessMake sure re-laying out and displaying just what you expect

FastResponsive scenarios… Fast launch, page navigation, resize, loading content…

Critical path optimization

UI frameworkUI threadElement treeDisplay pipelineInvalidations

BasicsCompositionIndependent animation and manipulationRender ahead

Fluid

Smooth, glitch-free, 60fps…Panning, animations, transitions…

Fluid

BasicsVsyncsWhen we put pixels on the screen

FrameWhat happens between two vsyncs

time

BasicsFor smooth animations and transitionsScreen content must be updated at vsync cadenceAll CPU and GPU work has to finish in time every frame, before vsync

time

CPU

GPU

CPU

GPU

CPU

GPU

Relying on compositionDesktop Window Manager (DWM) does CPU and GPU work for every frameCPU work proportional to the complexity of your UIGPU work typically proportional to overdraw

DWM is capable of meeting vsync deadlinesReally good at composing display transforms and opacity efficiently

Body

List

Body

List

BodyList

60fps with independent animationsUI thread too busy to robustly meet deadlines to initiate updatesDWM composition can help!

Independent animationsHappens on the composition threadOnly display transforms and opacity can be independently animated

Independent touch manipulations - panningAfter input is processed, composition applies transforms to layers

Achieving 60fpsIf you see glitches, pops, <60fps, not smooth experiences…Look at DWM’s CPU and GPU work on each frameIf you’re seeing a lot of work and missing vsyncs…

Simplify your UIToo much CPU? Reduce complexity of your app’s UIToo much GPU? Reduce overdraw

Render ahead and content virtualization

List Rendered

View

Render ahead

List Rendered

View

Render ahead

List Rendered

View

Render aheadRender ahead still on UI thread!Render surrounding regions that can be panned into view independentlyIf we cannot keep up, user may see through to layers behind or black

Drill into the UI threadWhere is the UI thread spending time?

FluidSmooth, glitch-free, 60fps… Great panning, transitions, and animations

Vsyncs, frames, and composition

If your app is not achieving 60fps, simplify your app’s UIToo much CPU? Reduce complexity of your UIToo much GPU? Reduce overdraw

If your app cannot keep up with panning, look at the UI thread

Analysis approach

An iterative approach1. Identify a problem2. Measure the scenario

a) Capture a trace of the problem

3. Analyzea) Determine if you are CPU, disk, or network boundb) Identify UI threadc) Look at where time is being spent

4. Modify app and iterate

An iterative approach1. Identify a problem

An iterative approach2. Measure the scenario

a) Capture a trace of the problem

An iterative approach3. Analyze

a) Determine if you are CPU, disk, or network boundb) Identify UI threadc) Look at where time is being spent

An iterative approach4. Modify app and iterate

Resources – other talks3-100 App performance: The Windows Performance ToolkitIn a few minutes, in this room.

Visual Studio3-316 Developing high performance websites and apps with JavaScript performance tools3-332 Visual Studio 2013 diagnostics tools for XAML-based Windows Store apps

Better panning3-158 Dramatically increase performance when users interact with large amounts of data in GridView and ListView3-156 Create fast and fluid interfaces with HTML and JavaScript

Resources – prior talks2-098 App performance: planning costs less than rearchitecting3-099 App performance: from UX to API for 5 key scenarios

Platform fundamentals3-157 XAML performance fundamentals3-068 Web runtime performance

ResourcesMSDN Dev CenterPerformance fundamentalsXAML and content virtualizationDiagnosing overdraw – XAML

The Windows Performance ToolkitDownload and install the standalone SDKhttp://aka.ms/downloadSDK

Thank you!

Questions?

Evaluate this session

Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.