App performance : T he mental model for interacting with the platform

2. App performance: The mental model for interacting with the platform Lalithra Fernando Program Manager, Windows Fundamentals 3-097

3. Agenda • Fast • Fluid • Analysis approach

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

5. ThePerformanceJourney Design &plan Architect &develop Instrument Test & Measure Analyze Design for performance Deliver consistent performance • Follow the Performance Journey • Where are we in the performance journey?

6. Introduction • Develop the fundamental insight to deliver fast and fluid apps • Our approach • Build the mental model – this talk! • Use the tools (WPT) – next talk! • See the complexities of your app’s interaction with the platform

7. Fast • Critical path • UI framework

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

9. Critical path analysis and optimization • Identify critical path • Look at the big picture • Identify each phase on the critical path • Use instrumentation or existing events • Drill down in each phase on the critical path • Which resource is your app blocked on? CPU, disk, GPU, network… • Any other delays? • Optimize

10. Critical path

11. Launch critical path example

12. Optimize • For each phase, ask yourself… • Can we not do it? Eliminate • Can we do it earlier? Cache, persist • Can we do it later or in parallel? Queue • Can we do it more efficiently? Batch, hash

13. Optimized launch critical path example

14. Optimized launch critical path example Build display list Do it faster! (Less complex, virtualized) Enumerate comics Not done! Cache and persist Decode images Do it earlier, in parallel, faster! (Quick list extract, smaller images) Check for updates Do it later!

15. UI framework on critical path • What is the system doing at the request of your app?

16. UI framework fundamentals • UI thread • Key to responsiveness • Spends time completing framework tasks on behalf of your app • Element tree • Items in your app are contained in this object model

17. UI framework - element tree Framework tasks

18. UI framework display pipeline • Loading, parsing, and building element tree/object model • Formatting (styles) and layout • Compute formats, apply templates • Measure and arrange • Build display for hit testing and rasterization • Display/rasterization • Walk tree, rasterize to target layers • Composition • Walk visual tree to render to primary and present

19. UI framework invalidations • Content on the screen is invalid • Caused by input, events, object model manipulations • Must go through portions of the display pipeline again • Invalidations vary in scope • Entire screen – navigate to a new page • More contained – display new mail, highlight a list item • Generates costly recalculations • Dirtiness may propagate to parents, siblings, children

20. UI framework invalidations - examples Formatinvalidation Font change Layoutinvalidation Width change in flow Displayinvalidation Color change Compositioninvalidation Opacity change

21. Managing UI framework costs • Complex UI Unnecessary invalidations

22. Managing UI framework costs • Reduce complexity • Number of elements • Templates • Text and flow considerations • Avoid complex layouts (e.g. flex) • Content virtualization Maximize batching and scheduling Understand every paint and layout calculation on the critical path Stage changes outside of the live element tree Commit the changes in intentional and large chunks to reduce calculations Isolate dirtiness Make sure re-laying out and displaying just what you expect

23. Fast • Responsive scenarios… Fast launch, page navigation, resize, loading content… • Critical path optimization • UI framework • UI thread • Element tree • Display pipeline • Invalidations

24. Fluid • Basics • Composition • Independent animation and manipulation • Render ahead

25. Fluid • Smooth, glitch-free, 60fps… • Panning, animations, transitions…

26. Basics • Vsyncs • When we put pixels on the screen • Frame • What happens between two vsyncs time

27. Basics • For smooth animations and transitions • Screen content must be updated at vsync cadence • All CPU and GPU work has to finish in time every frame, before vsync CPU CPU CPU GPU GPU GPU time

28. Relying on composition • Desktop Window Manager (DWM) does CPU and GPU work for every frame • CPU work proportional to the complexity of your UI • GPU work typically proportional to overdraw • DWM is capable of meeting vsync deadlines • Really good at composing display transforms and opacity efficiently Body Body List Body List List

29. 60fps with independent animations • UI thread too busy to robustly meet deadlines to initiate updates • DWM composition can help! • Independent animations • Happens on the composition thread • Only display transforms and opacity can be independently animated • Independent touch manipulations - panning • After input is processed, composition applies transforms to layers

30. Achieving 60fps • If you see glitches, pops, <60fps, not smooth experiences… • Look at DWM’s CPU and GPU work on each frame • If you’re seeing a lot of work and missing vsyncs… • Simplify your UI • Too much CPU? Reduce complexity of your app’s UI • Too much GPU? Reduce overdraw

31. Render ahead and content virtualization View List Rendered

32. Render ahead View List Rendered

33. Render ahead View List Rendered

34. Render ahead • Render ahead still on UI thread! • Render surrounding regions that can be panned into view independently • If we cannot keep up, user may see through to layers behind or black • Drill into the UI thread • Where is the UI thread spending time?

35. Fluid • Smooth, glitch-free, 60fps… Great panning, transitions, and animations • Vsyncs, frames, and composition • If your app is not achieving 60fps, simplify your app’s UI • Too much CPU? Reduce complexity of your UI • Too much GPU? Reduce overdraw • If your app cannot keep up with panning, look at the UI thread

36. Analysis approach

37. An iterative approach • Identify a problem • Measure the scenario • Capture a trace of the problem • Analyze • Determine if you are CPU, disk, or network bound • Identify UI thread • Look at where time is being spent • Modify app and iterate

38. An iterative approach • Identify a problem

39. An iterative approach • Measure the scenario • Capture a trace of the problem

40. An iterative approach • Analyze • Determine if you are CPU, disk, or network bound • Identify UI thread • Look at where time is being spent

41. An iterative approach • Modify app and iterate

42. Resources – other talks • 3-100 App performance: The Windows Performance Toolkit • In a few minutes, in this room. • Visual Studio • 3-316 Developing high performance websites and apps with JavaScript performance tools • 3-332 Visual Studio 2013 diagnostics tools for XAML-based Windows Store apps • Better panning • 3-158 Dramatically increase performance when users interact with large amounts of data in GridView and ListView • 3-156 Create fast and fluid interfaces with HTML and JavaScript

43. Resources – prior talks • 2-098 App performance: planning costs less than rearchitecting • 3-099 App performance: from UX to API for 5 key scenarios • Platform fundamentals • 3-157 XAML performance fundamentals • 3-068 Web runtime performance

44. Resources • MSDN Dev Center • Performance fundamentals • XAML and content virtualization • Diagnosing overdraw – XAML • The Windows Performance Toolkit • Download and install the standalone SDK • http://aka.ms/downloadSDK

45. Questions? • Thank you!

46. Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session • Scan this QR codeto evaluate this session and be automatically entered in a drawing to win a prize!