Combine Ajax axd files into one to improve performance

If we use Ajax or Ajax related controls then we'll find that a lot of script related requests are made to the server. Browser can request two concurrent requests to the server. For example browser may request for an image and while the image is loading the browser may request for an CSS file. But in case of javascript, browser can't request for two files. When browser request for a script file, it stops for any other request to the same server.

When you use Ajax or Ajax related tools (such as AjaxControlToolkit) the browser sends aysnchronous request to the server which is of extension (.axd). The number of asynchronous requests in axd form, the more time it'll take to load the page. So if we can combine those axd requests into one then we can get noticeable improvement in page loading.

 

Figure 1: axd requests to the server

Here are the steps to combine axd scripts to a single on.

1. Find all the javascript reference in your page. To do so, download the script reference profile from http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=13356. Then  register the dll in ur page and add the scriptreference profile as shown below:

Register the dll in page:

<%@ Register Assembly="ScriptReferenceProfiler" Namespace="ScriptReferenceProfiler" TagPrefix="microsoft" %>

Add Control to the page:

<microsoft:ScriptReferenceProfiler ID="profiler1" runat="server" />

After adding the script profiler if you run the page then you will find all the script reference in your page as shown below. Remember you can't combine Microsoft provided js file like MicrosotAjax.js, MicrosoftAjaxWebform.js etc.

 

Figure 2: Script reference found by script profiler

2. Then use the scriptmanage's combinescript tag to combine script:

<asp:ScriptManager ID="sm1" runat="server" CompositeScript-ScriptMode="Release">

    <CompositeScript>

        <Scripts>

            <asp:ScriptReference Name="AjaxControlToolkit.Compat.Timer.Timer.js" Assembly="AjaxControlToolkit, Version=3.0.20820.23813, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" />

            .

.

.

            <asp:ScriptReference Name="AjaxControlToolkit.CollapsiblePanel.CollapsiblePanelBehavior.js"

                Assembly="AjaxControlToolkit, Version=3.0.20820.23813, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" />

        </Scripts>

    </CompositeScript>

</asp:ScriptManager>

After combining those scripts you'll find that the page loading time improved significantly. Some useful links:

http://lancezhang.wordpress.com/2008/11/15/aspnet-ajax-performance/