How can I optimize the Microsoft AJAX Toolkit?

Question

This is rather infuriating. I'm trying to optimize a very large site, and I'm at the step of reducing HTTP Requests. Microsoft is not cooperating. I have the following ScriptResources included. I'll try and grab a top-line for each to distinguish them

1. // Name: MicrosoftAjax.debug.js 53.5Kb
2. // Name: MicrosoftAjaxWebForms.debug.js 14Kb
3. AjaxControlToolkit.BoxSide = function() { 11.4Kb
4. /// Sys.UI.DomElement 958 Bytes!
5. // Sys.Timer 982 Bytes!
6. // IDropSource 6.5Kb
7. AjaxControlToolkit.FloatingBehavior = function(element) { 2.2Kb
8. AjaxControlToolkit.BehaviorBase = function(element) { 5.4Kb
9. AjaxControlToolkit.DynamicPopulateBehavior = function(element) { 2.9Kb
10. AjaxControlToolkit.BoxCorners = function() { 3.6Kb
11. AjaxControlToolkit.DropShadowBehavior = function(element) { 3.4Kb
12. AjaxControlToolkit.ModalPopupBehavior = function(element) { 5.5Kb

Come on! 12 Bloody javascript includes! Less than a KILOBYTE! Half the time to get the dang data is probably spent asking for it! ARGHHH!

Anyway, as you can see, I am annoyed. Is there some way I can roll these up, and combine them? Like into one request?

Answer 1

You can write a HTTPModule to grab all the the axd/js files from the response, combine them into one, and send them to the client's browser through a request to an HTTPHandler.

You can take a look at Mads Kristensen's site to know what I am talking about. There are a lot many articles/workarounds for problems like yours.

Answer 2

check this:

Fast ASP.NET web page loading by downloading multiple javascripts in batch

Also, one common mistake is setting <compilation debug=”true”/> in some of the sites I have seen. As per Scott Gu,

When <compilation debug=”false”/> is set, the WebResource.axd handler will automatically set a long cache policy on resources retrieved via it – so that the resource is only downloaded once to the client and cached there forever (it will also be cached on any intermediate proxy servers).

Answer 3

Just replace <asp:ScriptManager ... /> with <ajaxToolkit:ToolkitScriptManager> ... /> in your ASPX page and you're done!

http://blogs.msdn.com/delay/archive/2007/06/11/script-combining-made-easy-overview-of-the-ajax-control-toolkit-s-toolkitscriptmanager.aspx

Answer 4

The question is how to minimize the overall requests to your server....

personally, i think its not a problem, if these js files are loaded ONCE. because they should be cached by the client. maybe you want to investigate, why this does not happen. and secondly there is a tag at the ScriptManager, that limits your js files.... maybe you want to look into the CompositeScript tag...

addditionally i would suggest looking into the LoadScriptsBevoreUI attribute and set it to false. then your content gets loaded bevore the javascripts.

Answer 5

Use CombineScripts=true inside your ToolkitScriptManager