The document provides an overview of Silverlight architecture and performance best practices. It discusses the rendering pipelines, UI thread, animation basics, layout and draw process, rasterization, and profiling Silverlight applications. Tips are provided for optimizing performance, such as using EnableRedrawRegions, avoiding large animations, and identifying what blocks the UI thread during debugging.

2. Pandurang Nayak Sumeet Jindal
Client Platform Evangelist Senior Developer
Microsoft Corporation Vectorform

3. Why are we here?
Learn the inner workings of Silverlight
Understand rendering pipelines
Find tips and techniques for building great SL
applications
Learn performance best practices
Understand how to profile your apps
Peek into few advanced features in the upcoming
Silverlight 3

4. Information Sources
Silverlight Performance Team
Silverlight Product Team
Top Silverlight Bloggers and Experts
Internal MS Silverlight Communities
My Own Experience with Customers

5. Silverlight Architecture
User Code
Controls
Managed Interop
CoreC Property Deep
Layout Text Media Gfx Zoom
Image
LR System
Interaction between
pipelines via brushes

6. Graphics Pipeline
Cross-Platform
Develop once, run anywhere
Retained Mode Graphics System
dirty rectangle

7. The UI Thread
On The UI Thread On the Non-UI Thread
User Code Frame Rasterization
Control Code Media Decoding
Animations
Layout
Master
Tip
Silverlight is hosted in the browser.
So, the (single) UI Thread belongs to the browser!

8. The Animate Loop
Tick Event Handlers
Ask browser
Any Property
to show
Changes?
frame
By
default,
Rasterize in
Layout
back buffer
Queue up
Rendering
Changes

9. Animation Basics
Frequency is the plugin’s framerate
Real-Time Animation (vs. Frame-based)
Types of animations:
Interpolation Animations
ColorAnimation, PointAnimation, DoubleAnimation
Splines, KeyFrames
ObjectAnimation
http://silverlight.net/quickstarts/
blend_quickstart/part3_animations.aspx

10. Knowing Animations
We only redraw the dirty rectangle
Avoid large scale animations
Text redraw triggers the font hinting algorithm
Master
Tip
When in doubt, use:
agControl.settings.EnableRedrawRegions = true;

11. Using EnableRedrawRegions

12. The Update Loop
Tick Event Handlers
Ask browser
Any Property
to show
Changes?
frame
Rasterize in
Layout
back buffer
Queue up
Rendering
Changes

13. Layout and Draw
ListBox
Designed for Nesting
ScrollViewer
Two Passes:
Measure & Arrange
Grid
Extensible
ScrollBars StackPanel
Master ListBoxItem
Tip
Nested flow layout that changes
often is expensive. Some Stuff

14. The Update Loop
Tick Event Handlers
Ask browser
Any Property
to show
Changes?
frame
Rasterize in
Layout
back buffer
Queue up
Rendering
Changes

15. Rasterization
All changes for a frame are drawn at once
Identify what causes a framerate drop
Master
Tip
Measure maximum framerate to tune your
application:
sender.settings.EnableFramerateCounter = true;
sender.settings.MaxFrameRate = 1000;
Integrate codepaths via Brushes

16. Brushes
A brush maps a screen position to a color
Brushes in Silverlight
SolidColorBrush
LinearGradientBrush
RadialGradientBrush
ImageBrush
VideoBrush
Master
Tip
When mixing pipelines, brushes are cheap!

17. Image and Video Brushes in Silverlight

18. Rasterization and Anti-Aliasing
Vector Graphics - Anti-aliased
Animation - Anti-aliased

19. Rasterization and Anti-Aliasing
Blurry Image Rendering
Cause: Interpolation

20. Rasterization and Anti-Aliasing
Blurry Thin Lines
Cause: non-int positions

21. Rasterization and Anti-Aliasing
Seaming
Cause: non-int positions
c = .5(.5*cbkgrd + .5*ctop) + .5(.5*cbkgrd + .5*cbottom)

22. Rasterization and Anti-Aliasing
In Silverlight 2 RTM,
Vector Graphics • Already Correct Behavior
Animation • Already Correct Behavior
Image Rendering • Layout Rounding NEW!!!
Sharp Lines • Layout Rounding NEW!!!
• Overlap edges
Seaming • Change Background Color
Non-Integer positioning mainly arises from Text and “Center”

23. Media Rendering
halo.wmv is 300x400. Which is least expensive?
<MediaElement Source=“halo.wmv”
a. Width= quot;225quot; Height=quot;300quot; />
b. Width=quot;300quot; Height=quot;400quot; />
c. Width=quot;303quot; Height=quot;404quot; />
d. Width=quot;450quot; Height=quot;600quot; />

24. Media: Every Pixel, Every frame!
Rinse & Repeat, at the video framerate
Encode at the minimum framerate that you need.
Encode at the desired size
Blending with media is expensive
Master
Tip
Let the media pipeline decide the best framerate

25. Media Rendering
halo.wmv is 300x400. Which is least expensive?
<MediaElement Source=“halo.wmv”
a. Width= quot;225quot; Height=quot;300quot; />
b. Width=quot;300quot; Height=quot;400quot; />
c. Width=quot;303quot; Height=quot;404quot; />
d. Width=quot;450quot; Height=quot;600quot; />

26. Media Rendering
halo.wmv is 300x400. Which is least expensive?
<MediaElement Source=“halo.wmv”
a. Width= quot;225quot; Height=quot;300quot; />
b. Width=quot;300quot; Height=quot;400quot; />
c. Width=quot;303quot; Height=quot;404quot; />
d. Width=quot;450quot; Height=quot;600quot; />

27. Shrinking video causes
(Ex: 300x400 to 225x300)
Extra bandwidth for extra 75x100px
Decoding extra 75x100px
Interpolation of every pixel in the 225x300 grid
Pretty awesome interpolation, but never as good as
native rendering

28. Profiling Silverlight Applications
Steps:
1. Observe
2. Hypothesize
3. Develop Testing Protocol
4. Experiment
5. Make Conclusion

29. Debugging Settings
Sys.Silverlight.createObjectEx({
source: quot;xaml/Scene.xamlquot;,
parentElement: document.getElementById(quot;SilverlightControlHostquot;),
id: quot;SilverlightControlquot;,
properties: {
width: quot;500quot;, height: quot;500quot;,
isWindowless: false,
background: quot;FF000000quot;,
framerate: quot;10000quot; },
events: { onLoad:onLoadHandler} });
function onLoadHandler() {
agControl = document.getElementById(quot;SilverlightControlquot;);
/* To see the framerate displayed in the browser status bar */
agControl.settings.EnableFrameRateCounter = true;
/* To see the redraw regions*/
agControl.settings.EnableRedrawRegions= true;
}

30. Your Animation is stuttering
What is the first step to debug?
a. Decrease the framerate
b. Identify the resource constraint
c. Turn on Redraw Regions
Master
Tip
While debugging render issues, always try to identify
what is blocking the UI thread.

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

32. xperf
Step 1: Install Microsoft Windows Performance Toolkit
http://msdn.microsoft.com/en-us/performance/default.aspx
Step 2: Admin-level CMD prompt
Step 3: xperf –on base
Step 4: Run scenario try to make all parts fully visible.
Step 5: xperf –d myprofile.etl
Step 6: xperfview myprofile.etl (or open Performance Analyzer)
Step 7: set _NT_SYMBOL_PATH=
srv*C:symbols*http://msdl.microsoft.com/downloads/symbols
Step 8: Trace > Load Symbols
Step 9: Select Graph, right-click and choose Summary
Step 10: Run again to make sure results were sampled correctly

33. xperf

34. What happens on Navigation
Download Create
Navigate Download JS
HTML Plug-in
Load Extract Launch
Control.Source is XAP
Assemblies Manifest CLR
Create Object
Set Visual
App Creates
Root
Object Tree

35. XAML Parsing Uncovered!
URI-based resources are loaded when added to
tree
Asynch
Cached via Browser
Build unique tree for each Control
Pull in Text Stack

36. Text Stack
TextBlock & TextBox
Glyph Capabilities
Text Stack
Cross-OS consistency
Glyph rendering is optimized for reading
Anti-aliasing, H/V dropout, Gamma Correction
These paths can be hit each tick if one is not careful
Accepted Fonts
Cross-OS, common set already on OS
EA fonts, only if installed on machine

37. Silverlight Spy
View Visual Tree for Silverlight applications
Along with .NET Reflector, can show you entire
structure and code of Silverlight applications
Master
Tip
Confidential stuff should always reside on server!
ANYTHING on the client can be exposed.

38. Silverlight Spy

39. References
Performance Bloggers
http://blogs.msdn.com/seema
http://blogs.microsoft.co.il/sasha
http://blogs.msdn.com/tess/
http://blogs.technet.com/markrussinovich/
Silverlight Spy
http://silverlightspy.com/

40. Session Resources
Windows Performance Toolkit: http://msdn.microsoft.com/en-us/performance
Silverlight http://www.silverlight.net
More Advanced Sessions http://2009.visitmix.com

43. © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should
not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS,
IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.