JavaScript Optimization Techniques Today

The wild popularity of Ajax fueled widespread usage of JavaScript. Almost every web 2.0 application relies on JavaScript to deliver front end interactivity. A growing list of JavaScript libraries (over 200+) are being created by various Ajax developers, some of which have gathered significant community adoption.

Though the usage of JavaScript code can lead to significant better overall user experience, it can also bring problems if not used properly. Some of the common performance related problems are:

1. Sluggish network and runtime performance. It is common to see web pages that load several hundred kilobytes of JavaScript. The size of JavaScript libraries ranges from kilobytes to several hundred kilobytes, or even megabytes. Big footprint introduces not only longer download/parsing time, but also bigger client side memory/CPU footprint. For some browsers, parsing/processing large script can take an excessive amount of time (Firefox bug #313967);
2. The browser freezes from time to time. There are many cases that JavaScript code can slow down the entire browser instance. For example, too many JavaScript files that need to be loaded may cause excessive number of network round trips; the execution of a long running JavaScript function can block the browser from responding to user events until the function finishes, etc.

There are a variety of techniques people use today to optimize JavaScript performance. Some of popular ones are:

1. On-demand loading (lazy loading)

   Instead of loading all JavaScript files up front, loading them only when necessary can reduce the upfront network impact. A lot of JavaScript libraries provide such functionality, such as YUI loader and Dojo’s package system.

2. Concatenation

   Concatenation is an effective way to reduce the number of round trips. Instead of loading different JavaScript files using separate HTTP requests, concatenating these files into one file would enable all of them to be loaded using one HTTP request. Dojo ShrinkSafe and YUI Compressor are two popular tools that supports file concatenation.

3. Minimization (and Obfuscation)

   JavaScript programs are delivered to the client side as plain text where it is compiled on the fly and executed. However, there are two downsides of this approach. The first is code size. The source can contain materials (such as whitespace and comments) that are not necessary for code execution but rather for the purpose of aiding human readability of the code. Such materials have negative performance impact. The second side effect is lack of code privacy. Given that the code is delivered as plain text, someone could read it, learn our techniques, and may even gather hints from the source code on how to compromise our security.

   JavaScript minimization and obfuscation are techniques to deal with both issues. Minimization removes the comments and unnecessary whitespace from JavaScript source code. Obfuscation changes the names of variables, functions, and members to strings that are harder to understand (and typically shorter).

   JavaScript tools typically implement support for both obfuscation and minimization. Some of the popular tools are (see References):

   • Dojo ShrinkSafe
   • YUI Compressor
   • Dean Edward’s JS Packer
   • JSMin

Applying the above techniques, it is possible to achieve a footprint reduction of 20% to 50%.