Websites are getting more interactive these days and most of this interactivity comes from JavaScript. People are using different JavaScript libraries and frameworks to make their websites more interactive and user friendly.

What is the problem?

After a while you end up referencing to more than a few JavaScript files in your page and that causes a problem! Your pages will load slower; this happens for two reasons:
  • You have used too much JavaScript. Total size of JavaScript files in some websites may reach more than 500KB and that's a lot, especially for users with slow connections. The best solution to this problem is to use gzip to compress JavaScript files as we do later in this article.
  • JavaScript files are loaded one by one after each other by the browser. As you know there is a response time for each request that varies depending on your connection speed and your distance from the server. If you have many JavaScript files in your page these times are added together and cause a big delay when loading a page. I have tried to show this using Firebug (A very popular and necessary FireFox extension for web developers) in the following screenshot.
    This is not the case for CSS or image files .If you reference multiple CSS files or images in your page they are loaded together by the browser.
    The best solution to this problem is to combine JavaScript files into one big file to remove the delay caused when loading multiple JavaScript files one by one.
Firebug shows networl activity for multiple JavaScript files loading

What can we do?

The answer is simple! Combine the files and gzip the response. Actually we are going to take few extra steps to create something more useful and reusable. But how we are going to do that?
The easiest way to do this is to use an HTTP Handler that combines JavaScript files and compresses the response. So instead of referencing multiple JavaScript files in our pages we reference this handler like this:
view plaincopy to clipboardprint?
  1. <script type="text/javascript" src="ScriptCombiner.axd?s=Site_Scripts&v=1"></script>  
ScriptCombiner.axd is our HTTP Handler here. Two parameters are passed to the handler, s and v. s stands for set name and v stands for version. When you make a change in your scripts you need to increase the version so browsers will load the new version not the cached one.
Set Name indicates list of JavaScript files that are processed by this handler. We save the list in a text file inside App_Data folder. The file contains relative paths to JavaScript files that need to be combined. Here is what Site_Scripts.txt file content should look like:

view plaincopy to clipboardprint?
  1. ~/Scripts/ScriptFile1.js  
  2. ~/Scripts/ScriptFile2.js  
Most of work is done inside the HTTP Handler; I try to summarize what happens in the handler:
  • Load the list of paths JavaScript files from the text files specified by the set name.
  • Read the content of each file and combine them into one big string that contains all the JavaScript.
  • Call Minifier to remove comments and white spaces from the combined JavaScript string.
  • Use gzip to compress the result into a smaller size.
  • Cache the result for later references so we don't have to do all the processing for each request.
We also take few extra steps to make referencing this handler easier. I have created a sample website to demonstrate the whole process. You can download it from the link below:

Download Sample Website (64KB)
Here is a screenshot of the website opened in solution explorer so you get a better idea of how file are organized in the sample website.

The implementation

I have got most of the code for the handler from Omar Al Zabir article named "HTTP Handler to Combine Multiple Files, Cache and Deliver Compressed Output for Faster Page Load" so most of the credit goes to him.
HTTP Handler contains a few helper methods that their purpose is very clear. I try to describe each shortly.
CanGZip method checks if the browser can support gzip and returns true in that case.
view plaincopy to clipboardprint?
  1. private bool CanGZip(HttpRequest request)  
  2. {  
  3.     string acceptEncoding = request.Headers["Accept-Encoding"];  
  4.     if (!string.IsNullOrEmpty(acceptEncoding) &&  
  5.          (acceptEncoding.Contains("gzip") || acceptEncoding.Contains("deflate")))  
  6.         return true;  
  7.     return false;  
  8. }  
WriteBytes writes the combined and compresses bytes to the response output. We need to set different content type for response based on if we support gzip or not. The other important part of this method sets the caching policy for the response which tells the browser to cache the response for CACHE_DURATION amount of time.
view plaincopy to clipboardprint?
  1. private void WriteBytes(byte[] bytes, bool isCompressed)  
  2. {  
  3.     HttpResponse response = context.Response;  
  4.   
  5.     response.AppendHeader("Content-Length", bytes.Length.ToString());  
  6.     response.ContentType = "application/x-javascript";  
  7.     if (isCompressed)  
  8.         response.AppendHeader("Content-Encoding", "gzip");  
  9.     else  
  10.         response.AppendHeader("Content-Encoding", "utf-8");  
  11.   
  12.     context.Response.Cache.SetCacheability(HttpCacheability.Public);  
  13.     context.Response.Cache.SetExpires(DateTime.Now.Add(CACHE_DURATION));  
  14.     context.Response.Cache.SetMaxAge(CACHE_DURATION);  
  15.   
  16.     response.ContentEncoding = Encoding.Unicode;  
  17.     response.OutputStream.Write(bytes, 0, bytes.Length);  
  18.     response.Flush();  
  19. }  
WriteFromCache checks if we have the combined script cached in memory, if so we write it to response and return true.
view plaincopy to clipboardprint?
  1. private bool WriteFromCache(string setName, string version, bool isCompressed)  
  2. {  
  3.     byte[] responseBytes = context.Cache[GetCacheKey(setName, version, isCompressed)] as byte[];  
  4.   
  5.     if (responseBytes == null || responseBytes.Length == 0)  
  6.         return false;  
  7.   
  8.     this.WriteBytes(responseBytes, isCompressed);  
  9.     return true;  
  10. }  
But most of the work is done inside ProcessRequest method. First we take a look at the method and I will try to explain important parts.
view plaincopy to clipboardprint?
  1. public void ProcessRequest(HttpContext context)  
  2. {  
  3.     this.context = context;  
  4.     HttpRequest request = context.Request;          
  5.   
  6.     // Read setName, version from query string  
  7.     string setName = request["s"] ?? string.Empty;  
  8.     string version = request["v"] ?? string.Empty;  
  9.   
  10.     // Decide if browser supports compressed response  
  11.     bool isCompressed = this.CanGZip(context.Request);  
  12.   
  13.     // If the set has already been cached, write the response directly from  
  14.     // cache. Otherwise generate the response and cache it  
  15.     if (!this.WriteFromCache(setName, version, isCompressed))  
  16.     {  
  17.         using (MemoryStream memoryStream = new MemoryStream(8092))  
  18.         {  
  19.             // Decide regular stream or gzip stream based on whether the response can be compressed or not  
  20.             using (Stream writer = isCompressed ? (Stream)(new ICSharpCode.SharpZipLib.GZip.GZipOutputStream(memoryStream)) : memoryStream)                  
  21.             {  
  22.                 // Read the files into one big string  
  23.                 StringBuilder allScripts = new StringBuilder();  
  24.                 foreach (string fileName in GetScriptFileNames(setName))  
  25.                     allScripts.Append(File.ReadAllText(context.Server.MapPath(fileName)));  
  26.   
  27.                 // Minify the combined script files and remove comments and white spaces  
  28.                 var minifier = new JavaScriptMinifier();  
  29.                 string minified = minifier.Minify(allScripts.ToString());  
  30.   
  31.                 // Send minfied string to output stream  
  32.                 byte[] bts = Encoding.UTF8.GetBytes(minified);  
  33.                 writer.Write(bts, 0, bts.Length);  
  34.             }  
  35.   
  36.             // Cache the combined response so that it can be directly written  
  37.             // in subsequent calls   
  38.             byte[] responseBytes = memoryStream.ToArray();  
  39.             context.Cache.Insert(GetCacheKey(setName, version, isCompressed),  
  40.                 responseBytes, null, System.Web.Caching.Cache.NoAbsoluteExpiration,  
  41.                 CACHE_DURATION);  
  42.   
  43.             // Generate the response  
  44.             this.WriteBytes(responseBytes, isCompressed);  
  45.         }  
  46.     }  
  47. }  
this.WriteFromCache(setName, version, isCompressed) returns true if we have the response cached in memory. It actually writes the data from cache to the response and returns true so we don’t need to take any extra steps.
MemoryStream is used to hold compressed bytes in the memory. In case that browser does not support gzip no compression is done over bytes.
We use SharpZipLib to do the compression. This free library does gzip compression slightly better than .NET. You can easily use .NET compression by replacing line 20 with the following code:
view plaincopy to clipboardprint?
  1. using (Stream writer = isCompressed ?  (Stream)(new GZipStream(memoryStream, CompressionMode.Compress)) : memoryStream)  
GetScriptFileNames is a static method that returns a string array of JavaScript file paths in the set name. We will use this method for another purpose that we discuss it later.
JavaScriptMinifier class holds the code for Douglas Crockford JavaScript Minfier. Minifer removes comments and white spaces from JavaScript and results in a smaller size. You can download the latest version from http://www.crockford.com/javascript/jsmin.html.
After we wrote minified and compressed scripts to MemoryStream we insert them into cache so we don’t need to take all these steps for each request. And finally we write the compressed bytes to the response.

Make it a little better

We can take one extra step to make the whole process a little better an easier to use. We can add a static method to our handler that generates JavaScript reference tag. We can make this even better by doing different actions when application is running in debug or release mode. In debug mode we usually don’t want to combine our JavaScript files to track error easier, so we output reference to original files and generate all JavaScript references as if we have included in our page manually.
view plaincopy to clipboardprint?
  1. public static string GetScriptTags(string setName, int version)  
  2. {  
  3.     string result = null;  
  4. #if (DEBUG)              
  5.         foreach (string fileName in GetScriptFileNames(setName))  
  6.         {  
  7.             result += String.Format("\n<script type=\"text/javascript\" src=\"{0}?v={1}\"></script>", VirtualPathUtility.ToAbsolute(fileName), version);  
  8.         }  
  9. #else  
  10.     result += String.Format("<script type=\"text/javascript\" src=\"ScriptCombiner.axd?s={0}&v={1}\"></script>", setName, version);  
  11. #endif  
  12.     return result;  
  13. }  
GetScriptFileNames as described before returns an array of file names for a specified set.
view plaincopy to clipboardprint?
  1. // private helper method that return an array of file names inside the text file stored in App_Data folder  
  2. private static string[] GetScriptFileNames(string setName)  
  3. {  
  4.     var scripts = new System.Collections.Generic.List<string>();  
  5.     string setPath = HttpContext.Current.Server.MapPath(String.Format("~/App_Data/{0}.txt", setName));  
  6.     using (var setDefinition = File.OpenText(setPath))  
  7.     {  
  8.         string fileName = null;  
  9.         while (setDefinition.Peek() >= 0)  
  10.         {  
  11.             fileName = setDefinition.ReadLine();  
  12.             if (!String.IsNullOrEmpty(fileName))  
  13.                 scripts.Add(fileName);  
  14.         }  
  15.     }  
  16.     return scripts.ToArray();  
  17. }  
view plaincopy to clipboardprint?
  1. <%= ScriptCombiner.GetScriptTags("Site_Scripts", 1) %>  
So whenever we want to reference a handler in an ASP.NET page we only need to add the following tag inside the head section of our page:
There is a final step you need to take before making all this work. You need to add HTTP Handler to Web.config of your website. To do so make the following changes to your web.config file:
view plaincopy to clipboardprint?
  1. <configuration>  
  2.     <system.web>  
  3.         <httpHandlers>  
  4.             <add verb="POST,GET" path="ScriptCombiner.axd" type="ScriptCombiner, App_Code"/>  
  5.         </httpHandlers>  
  6.     </system.web>  
  7.     <!-- IIS 7.0 only -->  
  8.     <system.webServer>  
  9.         <handlers>  
  10.             <add name="ScriptCombiner" verb="POST,GET" path="ScriptCombiner.axd" preCondition="integratedMode" type="ScriptCombiner, App_Code"/>  
  11.         </handlers>  
  12.     </system.webServer>  
  13. </configuration>