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
![Page 1: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/1.jpg)
![Page 2: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/2.jpg)
App performance: The mental model for interacting with the platformLalithra FernandoProgram Manager, Windows Fundamentals3-097
![Page 3: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/3.jpg)
FastFluidAnalysis approach
Agenda
![Page 4: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/4.jpg)
Our customers’ experience is affected by the performance of their apps
![Page 5: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/5.jpg)
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
![Page 6: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/6.jpg)
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
![Page 7: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/7.jpg)
Critical pathUI framework
Fast
![Page 8: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/8.jpg)
From A to B in minimal time… Launch, navigation, resize…Fast
![Page 9: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/9.jpg)
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
![Page 10: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/10.jpg)
Critical path
![Page 11: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/11.jpg)
Launch critical path example
Start Check for updates
Enumerate comics
Build display
Decode images Done
![Page 12: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/12.jpg)
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
![Page 13: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/13.jpg)
Start Check for updates
Check for comic
changesBuild
displayDecode images Done
Optimized launch critical path example
![Page 14: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/14.jpg)
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)
![Page 15: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/15.jpg)
UI framework on critical pathWhat is the system doing at the request of your app?
App code
System
More app code
![Page 16: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/16.jpg)
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
![Page 17: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/17.jpg)
UI framework - element tree
Body
Container
ImageList
Body
Container
Image List
Item
Item
Item
…
Framework tasks
![Page 18: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/18.jpg)
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
![Page 19: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/19.jpg)
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
![Page 20: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/20.jpg)
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
![Page 21: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/21.jpg)
Managing UI framework costsComplex UI Unnecessary invalidations
![Page 22: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/22.jpg)
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
![Page 23: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/23.jpg)
FastResponsive scenarios… Fast launch, page navigation, resize, loading content…
Critical path optimization
UI frameworkUI threadElement treeDisplay pipelineInvalidations
![Page 24: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/24.jpg)
BasicsCompositionIndependent animation and manipulationRender ahead
Fluid
![Page 25: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/25.jpg)
Smooth, glitch-free, 60fps…Panning, animations, transitions…
Fluid
![Page 26: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/26.jpg)
BasicsVsyncsWhen we put pixels on the screen
FrameWhat happens between two vsyncs
time
![Page 27: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/27.jpg)
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
![Page 28: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/28.jpg)
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
![Page 29: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/29.jpg)
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
![Page 30: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/30.jpg)
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
![Page 31: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/31.jpg)
Render ahead and content virtualization
List Rendered
View
![Page 32: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/32.jpg)
Render ahead
List Rendered
View
![Page 33: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/33.jpg)
Render ahead
List Rendered
View
![Page 34: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/34.jpg)
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?
![Page 35: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/35.jpg)
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
![Page 36: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/36.jpg)
Analysis approach
![Page 37: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/37.jpg)
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
![Page 38: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/38.jpg)
An iterative approach1. Identify a problem
![Page 39: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/39.jpg)
An iterative approach2. Measure the scenario
a) Capture a trace of the problem
![Page 40: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/40.jpg)
An iterative approach3. Analyze
a) Determine if you are CPU, disk, or network boundb) Identify UI threadc) Look at where time is being spent
![Page 41: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/41.jpg)
An iterative approach4. Modify app and iterate
![Page 42: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/42.jpg)
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
![Page 43: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/43.jpg)
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
![Page 44: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/44.jpg)
ResourcesMSDN Dev CenterPerformance fundamentalsXAML and content virtualizationDiagnosing overdraw – XAML
The Windows Performance ToolkitDownload and install the standalone SDKhttp://aka.ms/downloadSDK
![Page 45: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/45.jpg)
Thank you!
Questions?
![Page 46: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/46.jpg)
Evaluate this session
Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!
![Page 47: App performance : T he mental model for interacting with the platform](https://reader035.vdocuments.site/reader035/viewer/2022070421/568160b6550346895dcfd9fb/html5/thumbnails/47.jpg)
© 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.