app performance : t he mental model for interacting with the platform
DESCRIPTION
App performance : T he mental model for interacting with the platform. Lalithra Fernando Program Manager, Windows Fundamentals 3-097. Agenda. Fast Fluid Analysis approach. Our customers’ experience is affected by the performance of their apps. The Performance Journey. - PowerPoint PPT PresentationTRANSCRIPT
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.