Hi, my name is Erjan Gavalji. I am a developer in the ASP.NET division at Telerik. I am new to blogging, but I hope the topics I present will be of a real use.
RadControls for ASP.NET provide rich client-side functionality and nice look trough a number of external files - JavaScript code and CSS definitions. Those resources are registered through <script> or <link> tags and are downloaded by the browser.
Part of the client-side code in RadControls “Prometheus” is shared between all controls. It is contained in a different file to prevent downloading it multiple times when several controls coexist in a single page. The scripts of rich controls like RadEditor are split additionally to prevent the output of code that is not used (e.g. there is no need to burden the page with the code for the modules when the control does not have modules enabled).
The CSS files used by the controls need to be split for the same reason:
- each control utilizes specific CSS definitions
- different skins of a control have a set of definitions in common
Having this in mind a page with a RadEditor, a RadMenu, a RadTreeView and a RadGrid renders a pretty large number of <script> and <link> tags.
In ASP.NET Ajax the ScriptManager handles script resource registration. Embedded scripts (scripts compiled as embedded resources and registered with the WebResourceAttribute) are served by the ScriptResource.axd HTTP handler. The handler identifies the content to serve by a unique URL. When several different controls are used, the total length of webresource URLs increase which affects the page output size and the load time. Also since the browser requests script resources synchronously, each request adds up to the page load time. Last, but not least, Internet Explorer cannot parse more than 30 <link> tags.
RadScriptManager and RadStyleSheetManager solve the problems described above.
RadScriptManager is a control, derived from the ASP.NET ScriptManager. While it inherits all the features of its parent, it can combine all the script requests into a single one, thus reducing the page load time as much as possible. It outputs only one <script> tag regardless how many controls are used in the page.
RadStyleSheetManager provides the same functionality as RadScriptManager, by combining embedded CSS resources.
Both controls use a custom HTTP handler (similar to ScriptResource.axd) to serve the content. That handler compresses the content with gzip (as ScriptResource.axd does) if the client browser supports that. RadScriptManager and RadStyleSheetManager support caching, because the rendered URL is constant for the same set of controls.
There is a slight difference between the two controls. While RadScriptManager merges all registered script resources regardless of their origin, RadStyleSheetManager merges only RadControls “Prometheus” embedded skins.
I created a set of two pages to test the page load time. The first one uses an IFrame to load the second one. The container page measures the content page load time for a specified number of requests with the help of some JavaScript code.
The table below demonstrates the test results of a page, containing a RadTreeView and a RadMenu instances. The given times are the average of 10 page requests.
| Browser, cache | Resource combining disabled | Resource combining enabled |
| IE Cache enabled | 145 ms | 135 ms |
| IE Cache disabled | 2834 ms | 1101 ms |
| FireFox Cache enabled | 386 ms | 378 ms |
| FireFox Cache disabled | 2490 ms | 1200 ms |
I’m attaching the test project to the post. If you’re interested in measuring the load times of different control sets, please feel free to modify MainPage.aspx. Please note that to get real-life results you should put the application on a remote server. The net effect of script combining is not that obvious when running on localhost.
Acknowledgement:
During the
RadControls “Prometheus” development we put a lot of effort researching a way to overcome the limitations mentioned above. While doing our research we found the
ToolKitScriptManager, which combines the scripts to a single URL. We followed the
ToolkitScriptManager idea. Although we made a different implementation to fit the needs of
RadControls “Prometheus”, we’d like to give
David Anson the credits for the whole idea behind script combination. He has
a very extensive blog post, where he explains the way
ToolkitScriptManager works.