It’s been a while since we last talked about the cool new Lightweight
Rendering mode which has been available for
Telerik's ASP.NET ComboBox for several months and with the Q2 2013 release is now available for our
The new rendering is based on HTML5 and CSS3,
which results in a more lightweight markup, less CSS and images (i.e. requests)
used by your application. It is even better that at the same time the options to re-style a control are nearly limitless - just a few lines
of CSS can achieve what would have otherwise required reworking of
the larger stylesheets, modifying the sprites and all that hassle everyone who has
created a custom skin has gone through.
The previous blog post -
RadControls for ASP.NET AJAX Lightweight Rendering – Going deeper into HTMLsemantics and CSS3 – is quite extensive, so follow the link down the
rabbit hole for the details :)
What is even better – switching to the new rendering mode with the
Q2 2013 release will leave the controls unchanged visually, well except
for the rounded corners and gradients in ancient browsers. For the users they will look and behave the same way, but you, the developer,
will know how fast styling has become, and how bandwidth consumption and the performance
of your app have improved. And your boss will like it too :)
Well, here is a shorthand version of the changes:
Now, a bit for each control that just got upgraded with the new render mode:
Calendar – no longer employs tables for building the layout but just for the purpose of semantically structuring the date elements within a given month. Mobile browsers will enjoy this.
ComboBox – customizing the control is modernized with tiles (images) and gradients,
or if you still like the old ways – use images. But with the tables gone either
is far easier now.
FormDecorator – rounded corners and background gradients are now CSS3, so
custom heights and colors are a matter of a few CSS properties, instead of editing
sprites and tons of CSS for each height you decide to have.
Dock, ToolTip, Window – I think I am starting to repeat myself, but –
hey, we got rid of the tables! And headings are now h6. Take a look at how the nested
HTML elements look with the different modes for RadWindow:
For those of you unfamiliar with the 3D View in FireFox - it shows how many elements are nested under one another in your page. Put simply - less nesting means simpler CSS selectors, less room for error and, of course - better performance.
Not having red is cool, right?
Don’t just take my word, look at the numbers and do the math yourselves:
* Size and Loaded resources are calculated as follows: Base CSS file + Default Skin
CSS file + Images/Sprites used in the skin
** This may seem scary, but is due to the larger common sprite that is now used
by the control; with more controls this will actually improve performance.
*** The line numbers for Base and Default skin CSS files, generated by the SASS
file, before minification.
Now, let’s put these controls on one simple page and have the FormDecorator
style everything. Here is the difference:
333,7kb, 1,6ms (onload: 2s)
289kb, 1,23ms (onload: 1,31s)
72,3kb, 6 files, 7ms (onload: 1,42s)
40,4kb, 6 files, 7ms (onload: 1,02s)
23,2kb, 11 files, 310ms (onload: 1,38s)
20,7, 3 files, 274ms (onload: 0,98s)
And that is with just one instance of the control, your real application will have
much more complex pages where the effect will be even stronger.
All test results were taken with FireFox and FireBug and the server is the VS built-in
Cassini – the connection does not get much faster than that, so slower connections
will benefit more from the lower amount of resources the page will download.
Try out this new feature and compare your pages with their old versions, just add
the following in your web.config so you can change the render mode for the entire
<!— Switching one control only: -->
The party begins in the comments section right below and everyone is invited!
Marin Bratanov is a Principal Technical Support Engineer in the ASP.NET AJAX division. Ever since he joined Telerik in early 2011 as a novice, his main focus has been improving the services and customer care the company offers. Apart from work, Marin is an avid reader and usually enjoys the worlds of fantasy and Sci-Fi literature. You can find him on Twitter, Goodreads, LinkedIn and GooglePlus.