Silverlight: A few thoughts on minimizing CPU usage

  • Article

The first two suggestions will have the most drastic improvement on the performance of your Silverlight application, and can affect CPU usage, framerate, and application responsiveness.

 

1. IsWindowless=false is faster

Do not turn on isWindowless unless your design requires overlay of other HTML content on top of Silverlight content.

 

2. Opaque Background is faster

Do not set a transparent channel in the Silverlight HTML control background property. Setting the background to a transparent or semi-transparent value will add tremendous cost as each render call is forced through the blending pipeline, regardless if the transparency has any visual effect. (A background of 0, transparent, #11aabbcc, etc. will cause blending)

 

If you simply want to set the control’s background property to match that of the HTML, background:document.body.style.backgroundColor will suffice.

 

Note: I am referring to the background of the Silverlight HTML control. Setting an opacity on elements within your Silverlight app has relatively minimal cost.

Note: if you do decide to use transparency, please make sure to test the performance on Mac:Safari.

 

3. Only offer the quality that is needed for your design.

- Framerate: you can set the max framerate for the entire contents of the control in properties. Many websites run all animations and media at ~15fps, and most users do not notice.
Note: I set the value of the framerate property below.

- Media: When encoding your media file, remember that the average media file on the web is roughly encoded at 320x230, with ~15fps.

4. Test & Debug

- Quality and performance vary on different machines, and even on different OS/browser configurations.

- The below onLoadHandler shows how to display the framerate, for debugging purposes, in IE or Safari’s status bar. If your desired framerate is out of reach, you should set the framerate property lower so as not to peg the user’s CPU.

 

Sys.Silverlight.createObjectEx({

source: "xaml/Scene.xaml",

parentElement: document.getElementById("SilverlightControlHost"),

id: "SilverlightControl",

properties: {

width: "500",

height: "500",

background: "black", //NO ALPHA =)

version: "0.9",

framerate: “15” //only as much as needed

},

events: { onLoad:onLoadHandler} });

 

function onLoadHandler() {

/* To see the framerate displayed in the browser status bar */

agControl = document.getElementById("SilverlightControl");

agControl.settings.EnableFrameRateCounter = true;

}