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 requests 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 asynchronous requests 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.

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

1. Find all the JavaScript references in your page. To do so, download the script reference profile from here. Then register the DLL in your page and add the scriptreference profile as shown below:

   Register the DLL in page:

   ASP.NET

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

   Add Control to the page:

   ASP.NET

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

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

   

   Figure: Script reference found by script profiler
2. Then use the scriptmanager's combinescript tag to combine script:
   ASP.NET

   <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. A useful links is given below:

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

codeproject