Performance Tips
Microsoft Silverlight will reach end of support after October 2021. Learn more.
This topic provides information that you can use to help your Silverlight-based applications run fast and smoothly.
This topic contains the following sections.
- Test on Multiple Platforms and Browsers
- Set EnableFrameRateCounter to true During Development
- Use Transparent Background for a Silverlight Plug-in Sparingly
- When Animating the Opacity or Transform of a UIElement, set its CacheMode
- Cache Visual Elements when Blending layers using Opacity and Rotating or Stretching Objects
- Avoid Using Windowless Mode
- Use Visibility Instead of Opacity Whenever Possible
- Silverlight Uses Multi-Core in Rendering and Media
- In Full-Screen Mode, Hide Unused Objects
- Do Not Use Width and Height with MediaElement Objects
- Do Not Use Width and Height with Path Objects
- Break Up CPU-Intensive Work into Smaller Tasks
- Break Up Large Application Packages
- Use Double.ToString(CultureInfo.InvariantCulture) Rather Than Double.ToString()
- Use Stretch="Fill" When Rendering a Lot of Images
- Related Topics
Test on Multiple Platforms and Browsers
If you are developing Silverlight-based applications for multiple operating systems (for example, Macintosh and Windows) and browsers (for example, Internet Explorer, Mozilla Firefox, and Apple Safari), remember to routinely test your applications by using the platform and browser combinations that you are targeting. The differences in platform or browser behavior, and the code Silverlight uses to handle the behavior, can affect application performance. In particular, you should test thoroughly when you create applications that have transparent embedded plug-in backgrounds, or applications that use a large amount of procedural code (for example, C#, or Visual Basic).
Set EnableFrameRateCounter to true During Development
The rendering performance of the plug-in varies with the hosting parameters that are specified and the complexity of the content. We recommend that you set the EnableFrameRateCounter property to true during development. This setting displays the frames-per-second (fps) of the rendered Silverlight content in the browser's status bar, so you can fine-tune your application. The format of the frame rate counter is as follows:
**fps:**currentFramerate/maxFramerate
currentFramerate is the optimal frame rate that would apply in absence of an upper frame rate limit, based on conditions of the plug-in's environment and reported by the plug-in. maxFramerate is configurable, via the framerate initialization parameter (see How to: Add Silverlight to a Web Page by Using HTML). maxFramerate defaults to 24. Each of these numbers is a value reporting frames per second (fps). These values are interpreted to mean that whichever number is lower is the actual displayed frame rate. You can illustrate this relationship between currentFramerate and maxFramerate and by setting a deliberately low frame rate such as 2 per second and observing the results.
Use Transparent Background for a Silverlight Plug-in Sparingly
A transparent background may be useful, for example, when your embedded Silverlight plug-in contains a nonrectangular shape such as a picture of a car, and you do not want to show the rectangle surrounding the car. You can make only the picture of the car visible by setting the background of the Silverlight plug-in to transparent. However, using a transparent background for a Silverlight plug-in has a significant effect on performance, so avoid using this functionality whenever possible.
When Animating the Opacity or Transform of a UIElement, set its CacheMode
If you set CacheMode on a UIElement, rendering operations from RenderTransform and Opacity changes execute on the graphics processing unit (GPU), if available. It is important that you only set CacheMode on objects that are either being transformed or having opacity changes applied because otherwise the object will not benefit from caching and performance could be worse than if you did not cache it.
Cache Visual Elements when Blending layers using Opacity and Rotating or Stretching Objects
You can set the CacheMode property on a UIElement in order to cache it (and its children) as a bitmap; however, doing this can actually harm performance in some scenarios. For more information, see Cached Composition.
Avoid Using Windowless Mode
Set the Windowless property to true only when necessary. Performance is seriously impacted when in windowless mode (for example, tearing in animations). Due to this, media playback is not recommended at all in windowless mode.
Use Visibility Instead of Opacity Whenever Possible
If you simply want to make an object discretely visible or not visible, as opposed to using partial opacity or fading the object in or out of view, use the Visibility property instead of Opacity property. Opacity is associated with higher costs because the object is still hit tested and technically rendered. Setting Visibility to Collapsed avoids these costs.
Silverlight Uses Multi-Core in Rendering and Media
Silverlight takes advantage of multi-core for rendering and media playback. Therefore, your Silverlight-based applications will perform faster on multi-core systems.
In Full-Screen Mode, Hide Unused Objects
When your application goes into full-screen mode, hide all objects that are not being rendered in full-screen mode, or disconnect them from the tree. You can hide an object by setting its Visibility property to Collapsed.
Do Not Use Width and Height with MediaElement Objects
Avoid explicitly setting the width and height of a MediaElement object. Instead, let the media element display at its natural size. If you need to change the display size of the element, it is best to re-encode the media to the desired size by using a media encoding tool.
Do Not Use Width and Height with Path Objects
Do not set the Width and Height properties for a Path object. Setting these properties will result in additional stretching, which affects performance. Instead, rely on the explicitly set coordinates of the Path object to control its shape and position, and the Path will have a "natural" width and height.
Break Up CPU-Intensive Work into Smaller Tasks
When procedural code is running (for example, C# or Visual Basic), the plug-in stops drawing. Typically, this is not an issue if minimal work is done in the event handlers. However, if your application requires substantial, CPU-intensive work on the programmatic thread, we recommend that you split that work into smaller tasks. This will allow rendering to keep up with the desired frame rate.
Break Up Large Application Packages
In some cases, the Silverlight plug-in fails to load very large application package (.xap) files. When you create large applications, you should consider factoring some resource files or library assemblies into separate modules that you retrieve on demand. For more information, see Application Structure.
Use Double.ToString(CultureInfo.InvariantCulture) Rather Than Double.ToString()
The Double.ToString(IFormatProvider) method with a provider value of CultureInfo.InvariantCulture is optimized for performance. In general, the best practice is to use Double.ToString(CultureInfo.InvariantCulture) when you do not plan to show the data to the user or want the same result across cultures (for example, when comparing strings).
If your application displays numbers to the user and you want to display these numbers in the correct culture, you should use the Double.ToString(IFormatProvider) method with a provider value of CultureInfo.CurrentCulture or the zero-argument Double.ToString(), both of which perform a culture-sensitive conversion.
Use Stretch="Fill" When Rendering a Lot of Images
Although unintuitive, in some cases you can get better performance by setting Stretch properties to Fill instead of other values, including None. When you use Stretch = Fill, there is no potential clipping happening which adds extra edges. Any other type of stretch besides Fill needs to compute layout (e.g. compute centering). You will probably not notice the difference unless you are rendering a lot of images.