Silverlight Tip of the Day #67 – Silverlight Performance Tips
After watching Seema’s PDC talk on Building an Optimized, Graphics-Intensive Application in Microsoft Silverlight I thought it would be useful to summarize what I learned.
1. Debugging
The following items will help you debug performance in your Silverlight application:
- EnableRedrawRegions – Turn on this debug setting to see what and where rectangles are being redrawn within your application. When enabled you can see what is painted because the repaint region is colored in blue, yellow or pink. This property is set when you create your Silverlight plug-in.
Example:
<div style="height:100%">
<asp:Silverlight ID="Xaml1" EnableRedrawRegions="true"
EnableFrameRateCounter="true" runat="server" PluginBackground="Transparent"
Windowless="true" Source="~/ClientBin/Snowflakes.xap"
MinimumVersion="2.0.30523" Width="100%" Height="100%" />
</div>
- MaxFrameRate - To see what components of your application are having the most adverse affect on the performance you can set the MaxFrameRate for your application. You can then experiment with adding and removing components to your application to see how the performance changes. To do set the following properties highlighted below:
<div style="height:100%">
<asp:Silverlight ID="Xaml1" MaxFrameRate="10" EnableFrameRateCounter="true"
runat="server" PluginBackground="Transparent" Windowless="true"
Source="~/ClientBin/Snowflakes.xap" MinimumVersion="2.0.30523" Width="100%"
Height="100%" />
</div>
2. Media Pipeline
For each frame and each pixel when drawing a media element Silverlight:
- Decodes the image.
- Performs a YUV Convert
- Resize if media is not at its original size.
- Blend if needed (for example: overlays such as icons, scroll bars, etc.)
- Draw
Few notes on performance:
- Encode the media element at the minimum frame rate you can accept.
- Display your media element at its original size to avoid resize calculations. If you want a different size, first re-encode the media to the size you want to display it at. This will save on bandwidth and interpolation of every pixel each frame.
- Blending with media is expensive, avoid overlays where possible.
- For media, use a frame of around 60 for best results.
3. Text Rendering
Text rendering is expensive and should be avoided when possible. The following actions triggers text to be re-rendered:
- Translating or scaling the text
- Media on the page.
- Animation on the page.
Consider using a bitmap in replace of text for any intensive animation.
4. Silverlight Control.
- Running Silverlight with “Windowless = false” is faster than “Windowless=true”. Only set it to true if you need to overlay HTML content on top of your Silverlight application.
- Do not set the Silverlight plug-in control to PluginBackground="Transparent" unless absolutely necessary. This adds costs to each render call forcing it through the blending pipeline. If your goal is to match the Silverlight controls background color with your HTML background color simply set the background style color of your HTML page to match the Silverlight control. In the example below we set the body background to black. Make certain the size of the Silverlight control matches that which you declare in Page.xaml otherwise the difference will be represented by a white border.
<body style="background-color:Black;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/FastAnimation.xap" MinimumVersion="2.0.30523" Width="800px" Height="600px" />
</div>
</form>
</body>
Final Notes:
- Silverlight gives you full control of the UI thread. Use it wisely.
- Don’t bloat your code, especially your XAML.
- Turn off your application (stop threads, background calculation, etc.) when not needed.
- When brushes are resized a new texture is allocated for the brush. Keep this in mind when resizing!
- When Silverlight performs animation it only redraws the dirty rectangles. Avoid large scale animations.
- Set the frame rate of your application to only be what is needed. For video, you will want around 60. For animation, around 20-30.
Thank you,
--Mike Snow
Subscribe in a reader