(Working with 50 million cells has never been faster)
Telerik Silverlight Controls Performance
At Telerik, we know that UI controls’ performance is crucial
for your line-of-business (LOB) applications and making sure that RadControls
for Silverlight help you achieve unmatched performance has been our number one
priority.
Performance is probably in the top-3-favorite-word list of
marketers, and often its exact meaning is not very clear. This paper, however,
treats the concept of performance with facts and examples. It explains the
techniques we’ve used when crafting RadControls for Silverlight.
UI and Data Virtualization
In order to keep performance optimal in our controls,
Telerik has incorporated the concepts of UI and Data Virtualization into the
more data-centric controls in our suite. In the easiest scenario, utilizing
this virtualization involves putting elements into a VirtualizingStackPanel,
thus gaining the advantage of only having the UI Elements which are visible on
screen generated and taking up memory. This would mean that, for example, if
you had a combo box which contained 10,000 items, only the 15 or so which are
visible in the dropdown will be created, the others existing in the dataset but
not requiring visual elements. With this core concept in mind, our development
team has started to incorporate Virtualization techniques into the following
controls:
RadGridView
Utilizing a combination of UI Virtualization and container
recycling, Telerik Silverlight Grid has been optimized to work with the largest and smallest of datasets with
ease. Even with virtualization happening, there is still a problem to be
considered- each time a cell moves into view, a new element is being created
for it, causing a lot of traffic going back and forth to garbage collection,
which means memory is being taken and released as you perform operations and
even just scroll through the grid. Container recycling is our answer to that,
in which containers for data items are created once and then re-used as you
scroll, group, and sort through data. Instead of the constant back and forth
with garbage collection and new elements being created, RadGrid simply re-uses
the elements it has already created, aiding in lightning fast scrolling and
data operations on the client-side.
See Telerik Silverlight Grid
working with 50 million cells here
RadTreeView
In many cases a hierarchical dataset will not be only ten to
fifteen items, but rather span hundreds or even thousands of nodes. There are
several options that you have when using a tree view, since the hierarchical
data structure offers some unique challenges as far as leveraging performance
and providing the functionality required in a high-performance tree view.
One option which you can utilize is the load-on-demand
feature, which enables you to load and create data only when needed, easing the
initial loading of the control. In a typical scenario this means you start
with a handful of elements created and end up with a few hundred being managed
in memory and utilizing resources. When an item is selected, the sub-items are
loaded and created- until then, you only have to worry about as many visuals as
are initially loaded in the root.
Moving beyond this, we have incorporated UI Virtualization
and item caching into RadTreeView which enables for better loading and
accessing of data. With this combination, the root level items are virtualized
(allowing for peak performance with large lists), with child nodes being cached
for a period of time. Utilizing these techniques allows for RadTreeView to
provide seamless performance with large and small datasets, all the while not
utilizing any more memory than necessary to get the rich functionality which is
included in RadTreeView.
RadChart
The Data
virtualization approach leads to significant performance gains in Telerik Silverlight Chart as well, even
when working with a million records. The trick is that not all the data is
actually shown on the screen – it is summarized. RadChart achieves this using
a technique called Sampling. The control splits the data into
groups and aggregates each group using one of the many provided sampling
functions (you can even write your own). The end result is a graph that
summarizes the real data close enough while performing infinitely faster.
To make it
easier to drill-down inside and navigate the entire data source we have also
provided zooming and scrolling functionality and a modified RadSlider to make
it even more convenient to browse.
Data Binding
Our development team has gone to great lengths to ensure
that you have a variety of options as far as how you access and consume data
using RadControls for Silverlight. Taking advantage of the rich databinding
engine provided in the Silverlight framework, you have a number of options as
far as how you populate the controls.
-
WCF Services – Using a WCF service gives you control over sending
data back and forth to the client through operations which you define. Easily
tie the .ItemsSource of a RadControl to the resulting data set from an
operation or use it in complex operations before handling it in your
application.
- ADO.Net Data Services – Useful when working with the Entity
Framework, ADO.Net Data Services helps utilize http requests to send and
receive data between the client and server.
- WCF RIA Services – Telerik has been keeping up with the latest
versions of WCF RIA Services and is working to support both seamlessly with our
Silverlight 3 official release and our Silverlight 4 CTP release. Utilizing
WCF RIA Services, you can quickly and easily design a data layer, complete with
metadata and validation, that maintains the object model between the server and
client and allows for easy data manipulation.
XAML Optimization
One of the main things that people come across when first
stepping into Silverlight is how many lines of XAML code it takes in order to
create a template for a control, not to mention all the code on the backend
that really makes the control work. There are many considerations to take into
account with a control like RadGridView, which has different visual states for
hierarchy, adding new rows, and row selection, just to name a few. With this
in mind, our team has embarked on an effort to reduce the visual elements in
all of our templates with a few goals in mind.
First, reducing the number of visuals it takes to reach the
data item for any display, be it in a Grid, Chart, or Scheduler, means less
memory is being used as less objects have to be created. For a simple control
like a button this might not be a concern, but when you consider how many grid
cells need to be displayed at once in even the simplest scenario (even in a
virtualized grid), the numbers can get pretty astounding. Using RadGridView as
an example, we’ve recently made a reduction in the number of visual elements it
takes to display a grid, so in an application that displays a 10x10 grid, you
instantly have 100 less visual elements being created per element removed. Scale
this to larger grids with high volumes of data and you can see how this would
be beneficial.
Another way to increase performance is by finding better
ways to achieve the same results. Over the last two release quarters, the
RadGridView team has managed to reduce the overall XAML needed for the
RadGridView template by over 30%, all the while adding functionality. This not
only leads to better performance but also make it easier for developers and
designers who are working on any customization of the control to understand the
control template and all the different elements involved. Making the XAML much
more readable may not mean much to your end user, but you will definitely
notice our teams attention to detail and the ease at which you can work with
our controls.
Read more and see examples here
