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.
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.
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.
Resource combining disabled
Resource combining enabled
IE Cache enabled
IE Cache disabled
FireFox Cache enabled
FireFox Cache disabled
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.
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