800 likes | 1.02k Views
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
E N D
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 • Adjective • Sport • 2nd Sport • Human Organ • Sport (gerund) • UI Interaction • Household Appliance • UI Element • 2ndUIElement
Burly • CT Scan • Churlish • Racquetball • Curling • Brain • Boxing • Double-Click • Espresso Machine • Ribbon • Accordian Control Why Profile?
P09-10 Advanced Performance & Profiling in Silverlight 4 Seema Ramchandani Program Manager Microsoft Corporation
Agenda • Measuring & Profiling • Employing the GPU • Understanding the Layers
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
time BUSY Skip 3 turns 33 msec Frame Based Model 132msec Silverlight’s Real-Time Animation
Threads • UI Thread • User Code • Control Code • Animations • Layout • Non-UI Thread • Frame Rasterization • Media Decoding
4 Ways to Measure & Profile • Do the changes impact framerate?EnableFrameRateCounterMaxFramerate
4 Ways to Measure & Profile • Do the changes impact framerate?EnableFrameRateCounter • Visualize the Pain PointsEnableRedrawRegionsEnableCacheVisualization
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.)
EnableRedrawRegions<param name="enableRedrawRegions" value="true" /> demo
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
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
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
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
Demo ListBox in SW / HWProfile Instructions:http://blogs.msdn.com/seema --> search “xperf” demo
Agenda • Measuring & Profiling • Employing the GPU • Understanding the Layers
How we draw • ParentNode • Layout Offset (internal LayoutTransform) • RenderTransform • Clip • Opacity • OpacityMask • Children
How we draw • ParentNode • Layout Offset (internal LayoutTransform) • RenderTransform • Perspective • Clip • Effect • Opacity • OpacityMask • Children
Apply Effect Intermediate surface
Features that use RenderToIntermediate • WriteableBitmap • Effects • Projection • GPU Caching
: Strengths …and so much more, but let’s just start with these… ScaleTransforms RotateTransforms BitBlt + TranslateTransforms Blending
ParentNode • Layout Offset • RenderTransform • Perspective • Clip • Effect • Opacity • OpacityMask • Hardware Cache • Children
CPU OR GPU CPU
CPU OR GPU CPU
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
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
Background, is auto-cached with EnableGPUAcceleration
Dynamic – Animating Translation CacheMode = BitmapCache Static Dynamic – Animating Translation CacheMode = BitmapCache
Dynamic Do Not Cache Dynamic – Cached Static Dynamic – Cached
<Canvas> • <Canvas.Background><!--Insert Kitty--> </> • <Humpty Loaded="Play" /> • <Seahorse /> • <!-- Animated Seahorses --> • <Seahorse Loaded="Move" CacheMode="BitmapCache" /> • <Seahorse Loaded="Move" CacheMode="BitmapCache" /> • </Canvas> Z-Order
Z-Order Intermediate for background 2 cached nodes + +
<Canvas> • <Canvas.Background><!--Insert Kitty--> </> • <Humpty Loaded="Fall" /> • <Seahorse /> • <!-- Animated Seahorses --> • <Seahorse Loaded="Move" CacheMode="BitmapCache" /> • <Seahorse Loaded="Move" CacheMode="BitmapCache" /> • </Canvas> Z-Order
<Canvas> • <Canvas.Background><!--Insert Kitty--> </> • <Seahorse /> • <!-- Animated Seahorses --> • <Seahorse Loaded="Move"CacheMode="BitmapCache" /> • <Humpty Loaded="Fall" /> • <Seahorse Loaded="Move" CacheMode="BitmapCache" /> • </Canvas> Z-Order