1 / 78

Advanced Performance & Profiling in Silverlight 4

CL02. Advanced Performance & Profiling in Silverlight 4 . Seema Ramchandani Program Manager Microsoft Corporation. Give me a…. Burly CT Scan Churlish Racquetball Curling Brain Boxing Double-Click Espresso Machine Ribbon Accordian Control . Adjective Medical Diagnostic

lucus
Download Presentation

Advanced Performance & Profiling in Silverlight 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

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

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

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

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

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

  12. 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.)

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

  14. 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

  15. 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

  16. 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

  17. 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

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

  19. ListBox: Software vs. Hardware

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

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

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

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

  24. Apply Effect Intermediate surface

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

  26. Video card +

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

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

  29. CPU OR GPU CPU

  30. CPU OR GPU CPU

  31. 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

  32. 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

  33. Background, is auto-cached with EnableGPUAcceleration

  34. Static, included in background

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

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

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

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

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

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

More Related