Advanced Performance & Profiling in Silverlight 4

1. CL02 Advanced Performance & Profiling in Silverlight 4 Seema Ramchandani Program Manager Microsoft Corporation

2. Give me a… • Burly • CT Scan • Churlish • Racquetball • Curling • Brain • Boxing • Double-Click • Espresso Machine • Ribbon • Accordian Control • Adjective • Medical Diagnostic • Adjective • Sport • 2nd Sport • Human Organ • Sport (gerund) • UI Interaction • Household Appliance • UI Element • 2ndUIElement

3. Burly • CT Scan • Churlish • Racquetball • Curling • Brain • Boxing • Double-Click • Espresso Machine • Ribbon • Accordian Control Why Profile?

4. P09-10 Advanced Performance & Profiling in Silverlight 4 Seema Ramchandani Program Manager Microsoft Corporation

5. Agenda • Measuring & Profiling • Employing the GPU • Understanding the Layers

6. Iteratively measure perf 1. Identify potential problem areas • Startup? Memory? Framerate? 2. Monitor as changes are made • Framerate: size of dirty regions 3. Test on a range of hardware 4. Verify that things are as expected

8. Virtualized ListBox?UISpy.exe (as admin) demo

10. time BUSY Skip 3 turns 33 msec Frame Based Model 132msec Silverlight’s Real-Time Animation

11. Threads • UI Thread • User Code • Control Code • Animations • Layout • Non-UI Thread • Frame Rasterization • Media Decoding

13. 4 Ways to Measure & Profile • Do the changes impact framerate?EnableFrameRateCounterMaxFramerate

15. 4 Ways to Measure & Profile • Do the changes impact framerate?EnableFrameRateCounter • Visualize the Pain PointsEnableRedrawRegionsEnableCacheVisualization

16. Screen Updating We only draw what is “dirty”, ….as far as we can figure out, …sometimes we are too sensitive to bindings or property changes. (You should always double-check.)

17. EnableRedrawRegions<param name="enableRedrawRegions" value="true" /> demo

19. 4 Ways to Measure & Profile • Do the changes impact framerate?EnableFrameRateCounter • Visualize the Pain PointsEnableRedrawRegions • Big Picture: What is the actual diff?Profile: User & Platform CodeVSTS2010 + Silverlight 4 CLR

20. Profile with VSTS 2010 demo Instructions will be posted on http://blogs.msdn.com/seema vsperfclrenv /sampleon set CORECLR_ENABLE_PROFILING=1 set CORECLR_PROFILER=%COR_PROFILER% vsperfcmd /start:sample /output:myProfile.vsp vsperfcmd /launch:"c:\Program Files\Internet Explorer\iexplore.exe“ navigate, play with app, Shut down. vsperfcmd /shutdown

23. 4 Ways to Measure & Profile • Do the changes impact framerate?EnableFrameRateCounter • Visualize Pain PointsEnableRedrawRegions • Big Picture: What is the actual diff? Profile: User & Platform Code • Profile: Unmanaged Platform CodeVSTS2010 for SL4 or XPerf for SL3

24. Profiling with XPerf • ETW – Event Tracing for Windows • Tracing mechanism for both user-mode & kernel-mode apps. • Silverlight & CLR have embedded ETW events. • Analyzes unmanaged callstack. • Describes CPU cycles over time • Instructions: • http://blogs.msdn.com/seema

25. Demo ListBox in SW / HWProfile Instructions:http://blogs.msdn.com/seema --> search “xperf” demo

26. ListBox: Software vs. Hardware

27. Agenda • Measuring & Profiling • Employing the GPU • Understanding the Layers

28. Let’s define “software” and “hardware”

29. How we draw • ParentNode • Layout Offset (internal LayoutTransform) • RenderTransform • Clip • Opacity • OpacityMask • Children

30. How we draw • ParentNode • Layout Offset (internal LayoutTransform) • RenderTransform • Perspective • Clip • Effect • Opacity • OpacityMask • Children

32. Apply Effect Intermediate surface

33. Features that use RenderToIntermediate • WriteableBitmap • Effects • Projection • GPU Caching

34. Video card +

35. : Strengths …and so much more, but let’s just start with these… ScaleTransforms RotateTransforms BitBlt + TranslateTransforms Blending

36. ParentNode • Layout Offset • RenderTransform • Perspective • Clip • Effect • Opacity • OpacityMask • Hardware Cache • Children

38. CPU OR GPU CPU

39. CPU OR GPU CPU

40. Hardware Acceleration • Plugin Setting EnableGPUAcceleration • UIElement.CacheMode=BitmapCache • API: “Cache” this element as a bitmap. • Behavior: GPU handles Transforms*, Blends, and Clips. • Ex: GPU handles Media shrink or stretch • Support: • Windows: Browser & Fullscreen (all DX9.0c drivers) • Mac: Fullscreen

41. Where to set BitmapCache? • Animated Properties but Static Content • Transform, Opacity, or Clip • No “SW-only properties” on self or parent • Take care of your visual tree order. • Minimal Interleaving • No Nesting of Cached nodes

43. Background, is auto-cached with EnableGPUAcceleration

44. Static, included in background

45. Dynamic – Animating Translation  CacheMode = BitmapCache Static Dynamic – Animating Translation  CacheMode = BitmapCache

46. Dynamic Do Not Cache Dynamic – Cached Static Dynamic – Cached

47. <Canvas> • <Canvas.Background><!--Insert Kitty--> </> • <Humpty Loaded="Play" /> • <Seahorse /> • <!-- Animated Seahorses --> • <Seahorse Loaded="Move" CacheMode="BitmapCache" /> • <Seahorse Loaded="Move" CacheMode="BitmapCache" /> • </Canvas> Z-Order

48. Z-Order Intermediate for background 2 cached nodes + +

49. <Canvas> • <Canvas.Background><!--Insert Kitty--> </> • <Humpty Loaded="Fall" /> • <Seahorse /> • <!-- Animated Seahorses --> • <Seahorse Loaded="Move" CacheMode="BitmapCache" /> • <Seahorse Loaded="Move" CacheMode="BitmapCache" /> • </Canvas> Z-Order

50. <Canvas> • <Canvas.Background><!--Insert Kitty--> </> • <Seahorse /> • <!-- Animated Seahorses --> • <Seahorse Loaded="Move"CacheMode="BitmapCache" /> • <Humpty Loaded="Fall" /> • <Seahorse Loaded="Move" CacheMode="BitmapCache" /> • </Canvas> Z-Order