Telerik blogs

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:

  1. each control utilizes specific CSS definitions
  2. 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.

About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments

Comments are disabled in preview mode.