Lives: 30

Optimizing Web.UI Client Script Deployment

Posted Mon Oct 29, 2007 @ 2:36 PM

 

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.

 

Posted to Milos Glisic by milos

Posted on Mon Oct 29, 2007 @ 2:36 PM

Filed under:

Comments

Nick
Posted on Mon Oct 29, 2007 @ 2:36 PM
Hi Milos, Great job here! Thanks for this. Would it be possible to receive a list of the download sizes for each control? Cheers
Posted on Mon Oct 29, 2007 @ 2:36 PM

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

milos
Posted on Mon Oct 29, 2007 @ 2:36 PM
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.
Nick
Posted on Mon Oct 29, 2007 @ 2:36 PM
Thanks Milos!
Olivier
Posted on Mon Oct 29, 2007 @ 2:36 PM
When i add ComboBox to the ComponentArtScriptControls key it doesn't seems to work
Milos
Posted on Mon Oct 29, 2007 @ 2:36 PM
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.
Alan
Posted on Mon Oct 29, 2007 @ 2:36 PM
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?
Richard B
Posted on Mon Oct 29, 2007 @ 2:36 PM
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.
Krish
Posted on Mon Oct 29, 2007 @ 2:36 PM
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? ----------------------------
Krish
Posted on Mon Oct 29, 2007 @ 2:36 PM
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
milos
Posted on Mon Oct 29, 2007 @ 2:36 PM
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.
Shahar
Posted on Mon Oct 29, 2007 @ 2:36 PM
Hi, My problem is that when im adding the appSetting for the controls i need i get a vertical scrolling on the page. why?
Posted on Mon Oct 29, 2007 @ 2:36 PM

Component Art Web.UI Client Script Deployment

Anil
Posted on Mon Oct 29, 2007 @ 2:36 PM
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
Ben Joyce
Posted on Mon Oct 29, 2007 @ 2:36 PM
Brilliant! This is such a great tweak it should be made more obvious to new users... i onyl found this blog post by chance. I was having issues with a slow-loading page (190Kb) but using this and IIS6 HTTP Compression it's down to 20kb, result!
Fabio
Posted on Mon Oct 29, 2007 @ 2:36 PM
Hi everyone! I put the tags in web.config but a script error alert shows on screen, Snap_xxx underfined. I am using Snap and splitter controls. :( Can anyone help me? Thanks!
Anonymous comments are not allowed. Click here to log in or create an account.

Copyright © 2010 ComponentArt, Inc. All rights reserved.