Silverlight Application And Performance Nuggets
Sign in

Silverlight application and Performance nuggets

Solution Lead
Silverlight application and Performance nuggets

So far I worked with Silverlight different versions to develop many RIA applications, World is moving toward Rich interactive application, customer wants to have their web application more interactive and end user centric. And customers are now realizing importance of migrating their simple html web app to RIA; because of Rich user experience they found benefits in end user stickiness to their app and ultimately growth in their business.

 I started working on Silverlight 1.0 application those codes in JavaScript, and now Silverlight 4 is emerged where we develop code behind in C#, Vb.net and other supported manage codes. After working with different Silverlight application I realized that while matching customer and design expectation it’s very important to keep eye on application performance. And so I came up with certain important check point to validate that we are not compromising on application performance.

Performance checks for Silverlight app:

Avoid using .findName to access control from XAML:

function onLoginButton_Click(sender, args)

{

    var txtLogin = sender.findName('txtLogin');

    string strloginName = txtLogin.Text;

}

 

FindName has to walk through the tree of XAML objects to find out expected match which is very performance perspective. Either you can try following options:

  1. Naming the target element and use it directly where it required [using x:Name  in xaml]
  2. Using findName initialize object in application loaded event, and use stored global reference where it required.

Avoid naming elements if it really not needed:

Many times we do not concern while naming xaml element. Designers give naming to make it easy for them to navigate through templates/ object trees in Blend they creating. We developers does not care while naming controls like border, stackpanel etc. but let me tell fact that for every naming XAML markup creates a variable. Obviously each of those variables eats precious byte space in the InitializeComponent call.  I will suggest:

  1. Use naming only for controls those referred in code behind like Button, TextBox, ListBox, etc
  2. Avoid naming controls like TextBlock,Border, borders, lines, rectangles and similar.
  3. Use data binding where there is need to refer controls

 Don’t ignore importance of settings while integrating Silverlight applications in web pages

When we create Silverlight application in visual studio it creates test web pages .aspx/.html. And we developers go live with same test pages; there some small setting can help us to improve good performance.

1.       Avoid Using Windowless Mode

Set the Windowless property to true only when necessary. The default is false. Windowless mode is highly expensive.  More..

 

  1. Reduce MaxFrameRate

You can see the MaxFrameRate value by enabling a performance-tuning option that displays frames per second for Silverlight rendering. This maximum number of frames that Silverlight can render per second. The default value is 60 second. You can reduce this to desired number.

To set parameter of object on HTML page:
<param name="framerate" value="24">

To set it in Silverlight code:
App.Current.Host.Settings.MaxFrameRate=24;

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.


 More..

  1. Use EnableGPUAcceleration

Basically GPU is a processor attached to your graphics card that is generally used for calculating floating point operations. In addition, it is very useful to save you a lot of CPU time.

To enable EnableGPUAcceleration on your Silverlight control For HTML modify the Silverlight control to include the following param:

 <param name="EnableGPUAcceleration" value="true" />

 For ASPX add the following attribute:

 <asp:Silverlight ID="SilverlightControl" EnableGPUAcceleration="true" runat="server" Source="~ /SL.xap" MinimumVersion="3.0.40307.0" />

 For silverlight controls set CacheMode in code behind like:
ControlGrid.CacheMode = new BitmapCache();

else in XAML:
<Grid x:Name="ControlGrid" CacheMode="BitmapCache">

 

  • To use it you must enable it both on your Silverlight control/plug-in as well as any of the controls you want to leverage it.
  • By default this option is disabled.

And it enables visual controls to be cached as bitmaps and whenever re-rendering required we can bypass the expensive rendering phase for the cached visuals and just display them.

More..

Replace Opacity by setting Visibility

Always use setting Visibility to Collapsed or Visible instead of fading or change elements opacity. Because Opacity is associated with higher costs because the object is still hit tested and technically rendered.

Animations

  • Many and big size controls animations are highly CPU costly as there is redrawn regions and multiple frame calls. So avoid such heavy use of animations or try to minimize their frequency.
  • There is additional cost to animate properties like height, width, visibility, alignments and margin as that call to layout relevant changes.
  • Avoid Text resizing animations, as there is extra cost to optimize text for readability.
  • We can always use images replace to static text.

Tools to profile Silverlight applications

There are many tools out for profiling your Silverlight applications, select one of them as per your application and need. Here are some samples:

1.       Visual studio profiler

2.       Xte profiler

Threading

Threading is basically used to multiple concurrent jobs in same application. Using threads in your Silverlight application can improve performance by increasing the responsiveness of your application. There are multiple ways you can try in Silverlight.

-          Using Threadpool

  • allows you to spawn multiple background threads.

-          Using Dispatcher class

  • The Dispatcher class greatly simplifies calling the UI thread with a static method BeginInvoke.

-          Using DispatcherTimer

  • The DispatcherTimer is a special timer integrated into the Dispatcher queue that is reevaluated on every Dispatcher loop

-          Using BackgroundWorker class.

  • provides an easy way to run time-consuming operations on a background thread. The BackgroundWorker class enables you to check the state of the operation and it lets you cancel the operation

Other important points to be noted

  • Do not create only 1 single xaml for all UI. Cut it in separate controls and use them whenever required.
  • Do best utilization of UI thread, as Silverlight has full control of the UI thread.
  • Handle memory leakage, and do not forget to stop threads, background calculation, if not needed.
  • Do not create redundant styles create a separate resource files for styles and use them as required.
  • Try to do best utilization of storyboards because Silverlight performs animation it only redraws the dirty rectangles.  
  • Always use Image.Stretch = “Fill” to load large images to prevent any layout updates due to stretching. So if you use Stretch = “Fill” there is no potential clipping happening which adds extra edges.
  • Do not specify Width and Height for following controls, Let plug-in render it at its natural size.
  1. MediaElement  - 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
  2. Path - Setting explicit Height & width calls additional stretching, which affects performance. better rely on the explicitly set coordinates of the Path object to control its shape and position.[basically avoid using Path controls as they very heavy to use]
  • If application is very large, consider loading pieces of it "on demand".
  1.  
    1. Break up large application in controls and modules
    2. We can do on demand .xap ,assembly, resource files download
  • Avoid setting Transparent Background for Silverlight controls.
  • SL app Loading time increase because of your XAP file. if you use more image, video in sliverlight project XAP file size will be increasing.
  • Avoid large use of event handlers. When you attach normal events, registering an event handler creates a strong reference from the event source to the listening object, And this reference persist still the lifetime of event source.

Reference:

http://msdn.microsoft.com/hi-in/bb693295(en-us).aspx

http://www.microsoftpdc.com/2009/P09-10

http://silverlight.newagesolution.net/SilverlightTutorials/UsingThreadpoolInSilverlight.aspx

 

 

start_blog_img