This space is available to any ComponentArt employee to write about anything.

Optimizing Web.UI Client Script Deployment

 

As part of an overall effort to optimize HTTP-related performance of Web.UI, version 2007.2 includes a new mechanism for reducing the overhead of client script deployment. Since the script files themselves are of manageable size, and drastically benefit from compression in many cases, the biggest overhead comes from HTTP round-trips. Each Web.UI control typically depends on anywhere from one or two to several script files, so the number of separate requests can affect the load times in a web application.

The ComponentArt ScriptHandler, a new feature of Web.UI 2007.2 can be used to dramatically increase the efficiency of this aspect of Web.UI, pushing it to its theoretical limits.
 

With ScriptHandler, you have the ability to do choose between three different ways of sending ComponentArt client scripts to the client in your web application:

 

1. Status quo

By default, script rendering will work exactly the same way it has until now. Each control will output its own set of scripts or register them with the ASP.NET AJAX ScriptManager. In the latter case, the scripts will get compressed by default, but the overhead of multiple HTTP requests will remain.

 

2. Output the entire Web.UI client library in one request

The new script deployment mechanism allows you to combine all Web.UI client script libraries into one and send them to the client as one chunk. This minimizes the number of HTTP requests (to a single one), and maximizes the benefits of compression. As of version 2007.2, the combined size of all client scripts, compressed, is 327 KB. Due to browser caching, this means that the Web.UI scripts will get loaded all at once, and only the first time a user visits the site.

 

To enable this feature, simply add the following two entries to your web application’s web.config file:

 

in <httpHandlers>:

 

            <add type="ComponentArt.Web.UI.ScriptHandler,ComponentArt.Web.UI" path="ComponentArtScript.axd" verb="*"/>

 

in <appSettings>:

 

<add key="ComponentArtScriptControls" value="All" />

 

3. Output combined scripts of select controls in one request

If the size of the one-time download in option 2 is a concern, it can be further optimized by excluding from the download those controls which are never used in your web application. For instance, if you only use Grid, TreeView and Menu in your application, you can change the appSetting to

 

<add key="ComponentArtScriptControls" value="Grid,TreeView,Menu" />

 

This will cause the Web.UI framework to combine all the scripts on which these three controls depend on into one chunk, and send it to the client compressed, and in a way which promotes indefinite client-side caching. For the above controls, the download size would be 90 KB.

 

Note again that this is an application-wide setting, so the list of controls should include any ComponentArt controls that are used anywhere in the application.
 

This feature is available for preview now, in the Beta 2 build of Web.UI 2007.2. We hope you find it useful, and that it helps you squeeze that extra bit of performance out of our control suite and your website.

 

Share this post: email it! | bookmark it! | digg it! | reddit!

Posted by: Milos
Posted: Monday, October 29, 2007 2:36 PM


Comments

Nick said:

Hi Milos, Great job here! Thanks for this. Would it be possible to receive a list of the download sizes for each control? Cheers
# October 30, 2007 10:50 AM

Only .NET and Nothing Else - Blogerred by Anand Narayanaswamy said:

ComponentArt is pleased to announce that Web.UI 2007.2 Beta 2 (2007.2.1189) is available for immediate

# October 30, 2007 9:31 PM

milos said:

Nick, the size of the download will really depend on the specific combination of controls you are using. There is some overlap between the scripts that different controls use, so it's not very clear cut. For instance, TreeView alone is a 51 KB download, and Grid alone is 66 KB. If you request TreeView and Grid together, the download is 101 KB. Setting the right combinations of controls right in the appSetting will give you the optimal download, and you should be able to see its size fairly easily, using FireBug or a similar tool. I hope this helps.
# October 31, 2007 6:34 AM

Nick said:

Thanks Milos!
# November 1, 2007 11:59 AM

Olivier said:

When i add ComboBox to the ComponentArtScriptControls key it doesn't seems to work
# November 26, 2007 12:13 PM

Milos said:

Olivier: There is indeed a bug affecting ComboBox and ScriptHandler in 2007.2. The service pack build we'll be issuing later today includes a fix.
# December 17, 2007 12:40 PM

Alan said:

Great feature. I'm using it as described, and I can see in Firebug that I'm now only making one request to ComponentArtScript.axd of a measly 63KB (for the controls I'm using). But, the script isn't being cached in the browser? I've set the compilation debug mode to false in web.config, and the response headers look fine - (cache-control public, expiration 2 years time). Any ideas why the browser needs to request this file each time? Is it because the request uses a querystring?
# February 1, 2008 12:46 PM

Richard B said:

Excellent work. I was about to send you an email asking if you had any plans to implement functionality such as this, but it's already done!. Sensational.
# March 10, 2008 8:03 PM

Krish said:

does anyone got solution for Alans problem? i face the same problem. seems like everytime the ComponentArtScript.axd is loaded from the server than reading it from cache. early reply is greatly appreciated. Thanks in Advance. -------------------------- Great feature. I'm using it as described, and I can see in Firebug that I'm now only making one request to ComponentArtScript.axd of a measly 63KB (for the controls I'm using). But, the script isn't being cached in the browser? I've set the compilation debug mode to false in web.config, and the response headers look fine - (cache-control public, expiration 2 years time). Any ideas why the browser needs to request this file each time? Is it because the request uses a querystring? ----------------------------
# April 22, 2008 5:49 AM

Krish said:

i use i tot ComponentArtScript.axd file size will be less than 90B. but my file size is 230KB. am i missing something my version is 2007.2.1427.3
# April 22, 2008 7:06 PM

milos said:

Krish, I suggest upgrading to Web.UI 2008.1. There were a number of related fixes having to do with server caching of scripts emitted through the custom handler, and I think they should resolve your problem.
# April 23, 2008 11:53 AM

Shahar said:

Hi, My problem is that when im adding the appSetting for the controls i need i get a vertical scrolling on the page. why?
# May 13, 2008 10:23 AM

Jonas Stawski said:

Component Art Web.UI Client Script Deployment

# July 7, 2008 11:28 AM

Anil said:

Is "ComponentArtScript.axd" a physical file? if so where is it stored... I cannot find this file anywhere and was not part of the ComponentArt install... any insight on this is helpful... thank you
# July 8, 2008 9:31 AM
Leave a Comment

(required) 

(required) 

(optional)

(required) 


Blogs On This Site
Thoughts on web user interfaces and component development.
Ramblings of a web control developer.
Web.UI news and more
Next weeks guest: A dog and a baby dog!
I'm in your base, killing your dudes.
Absurdity is it's own message.
Musings of an ex Java developer
im in ur page, hackin ur codez
ComponentArt in the Community
... and the program ran happily ever after.

This Blog