Performance tips for Windows Store apps using XAML

1. Performance tips for Windows Store apps using XAML Kiran Kumar Principal Development Lead Session 4-103

2. Agenda • Performance ideology • XAML architecture • Tips and tricks • Profiling tools

3. Performance ideology

4. Performance • People won’t use apps that… • Take a long time to start • React slowly to input • Have choppy animations • Glitch audio or video playback • Drain the battery • Why do we care ?

5. Performance • Understand your users and how they will use your application • Prioritize the experience (activation, suspend/resume, animation, media playback, panning, etc.) • Understand your target hardware (CPU, GPU, memory) • What do I do?

6. Performance • Think about performance at every stage (spec, design, test) • Set goals • Make performance tuning an iterative process • Test the App on target hardware • Investigate, Fix, Measure • How do I do?

7. XAML architecture

8. XAML architecture Windows Store app (C++, C#, or Visual Basic) • Complete native implementation built on top of DirectX Windows Runtime / C++ XAML platform XAML ABI support XAML core and framework (parser, controls, property engine, styles, animation, etc.) Windows 8 subsystem Media App Theming & PVL DirectWrite Direct3D Direct2D Input XAML graphics engine

9. Multiple-core enabled • Multithreaded architecture to take advantage of multiple cores UI thread User code, parser, layout, and rendering Compositor thread Independent animations, scene composition, and graphics hardware communication Worker threads… Image decoding, background workers, async IO, etc…

10. XAML Architecture • XAML operations are broken into frames • UI thread frames are generally slow • Run layout on dirty elements • Parse XAML for any objects being created • Render visible objects into primitives • Render thread frames run at 60 FPS • Update animation values • Issue drawing commands for primitives • Independent animations

11. XAML tips

12. Optimizing for startup Compositor thread Device setup Composition pass Send drawing commands to the hardware • UI thread • Parsing • Layout • Rendering • App code • What happens during startup

13. Optimizing for startup • Trim down your XAML resource dictionaries • Trim down your element count • Make smart web requests • Use UI virtualization to create only visible items • Reduce your code in the startup path

14. Demo: Profiling for startup (XPerf)

15. Recap: StartupXAML events • PerfTracker_SplashScreen_AppShown • ParseXAML • Frame • Layout • MeasureElement • Microsoft-Windows-Immersive-Shell • Microsoft-Windows-XAML

16. Animation • How XAML handles animations • Dependent animations • UI thread creates the animation tree • Each frame of animation is generated on the UI thread and sent individually to the Compositor • Compositor renders the scene • Independent animations • UI thread creates the animation tree • Compositor takes over and runs the animation

17. Animation • Use independent instead of dependent animations. • Stop or remove the animation if not used, not visible, or otherwise unnecessary. • Animate RenderTransforms instead of width, height, or other layout properties of an object. • Be careful when using infinite animations. • Make animations smooth

18. Animation • GPU overdraw can impact frame rates. • GPU work is largely dependent on the number of pixels being drawn each frame • Unnecessary (overlapped) XAML elements cause unnecessary GPU work. • GPU budget is 16.7ms to hit 60 FPS • ARM devices have a fill-rate of around 3-4 (there is time to draw each pixel 3-4 times) • Make animations smooth

19. Panning Compositor Using Direct Manipulation, independently moves the scene • UI Thread • Realizes the virtualized content • What happens during panning

20. Panning • Touch interactions might be dependent • Avoid moving objects in Pointer events • ScrollViewers (and controls that use them) are the only way to get independent touch interactions • Keep the UI thread free. • Keep the element count low. • Use placeholders. • Jittery Touch Movements

21. Panning • GPU overdraw impacts frame rate • Keep the element count low. • Virtualized items can be slow to generate • Avoid DataTemplateSelectors, as they break element recycling • Minimize element counts • Re-template controls if you don’t need the capability of the default templates and visual states • Panning responsiveness

22. Demo: Profiling for panning and animation glitches

23. FPS Composition FPS UI Thread Video memory Batch count Recap: Profiling for animation glitches • DebugSettings.EnableFrameRateCounter = true;

24. Recap: Profiling for panning and animation glitches • DebugSettings.IsOverdrawHeatMapEnabled = true;

25. Optimizing your games • Scope XAML overlay elements to smallest required area. • Use fewer immediate XAML children in a SCBP. • Collapse the XAML content if not needed; otherwise you will not get DirectFlip. • Offload heavy DirectX operations to background thread in order to avoid UI thread delays. • SCBP (Swapchain • BackgroundPanel)

26. Media • Full-screen media with no overlay is the best. • Explicitly set full-screen MediaElement dimensions to the Windows.Current.Bounds. • Release media streams. • Put other elements to the side of embedded video rather than on top. • Use MediaElement.PosterSource. • Avoid animations while media is playing. • Reduce overlays

27. Memory • Memory usage indirectly impacts users • App might get killed by PLM on suspend • App might cause background apps to be killed • App might OOM • Could be caused by… • No virtualization • High element counts • Large images not decoded to size • High Memory cost

28. Related sessionsFUN#5: Introduction to creating Windows Store apps using XAML FUN#30A: XAML List controls

29. Resourceshttp://msdn.microsoft.com/en-us/library/windows/apps/hh750313.aspxhttp://msdn.microsoft.com/en-us/library/windows/apps/hh825871.aspxhttp://msdn.microsoft.com/en-us/library/windows/desktop/ff191077(v=vs.85).aspxResourceshttp://msdn.microsoft.com/en-us/library/windows/apps/hh750313.aspxhttp://msdn.microsoft.com/en-us/library/windows/apps/hh825871.aspxhttp://msdn.microsoft.com/en-us/library/windows/desktop/ff191077(v=vs.85).aspx

30. Resources • Develop: http://msdn.microsoft.com/en-US/windows/apps/br229512 • Design: http://design.windows.com/ • Samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples • Videos: http://channel9.msdn.com/Windows Please submit session evals by using the Build Windows 8 app or at http://aka.ms/BuildSessions