In the past few years, performance research has become more prevalent thanks to research by the Yahoo! Exceptional Performance Team and Google’s Steve Souders. Most of that research studies not the individual HTML page, but the resources the page requires to display or behave correctly.
Although both CSS and JavaScript may be included within an HTML page, best practices encourage storing CSS and JavaScript in external files that can be downloaded and cached separately. Performance research asks: How can these external resources be downloaded and applied most efficiently? The first approach is to limit the number of external requests since the overhead of each HTTP request is high. The second approach? Make your code as small as possible.
The history of JavaScript byte savings
Douglas Crockford introduced JSMin in 2004 as a way to shrink JavaScript files before placing them into a production environment. His simple tool removed spaces, tabs, and comments from JavaScript files, effectively decreasing the size compared to the original source file. His rationale was sound: decreasing the size of JavaScript code results in faster downloads and a better user experience.
Three years later, Yahoo! engineer Julien Lecomte introduced the YUI Compressor. The YUI Compressor’s goal was to shrink JavaScript files even further than JSMin by applying smart optimizations to the source code. In addition to removing comments, spaces, and tabs, the YUI Compressor also safely removes line breaks, further decreasing the overall file size. The biggest byte savings, though, come from replacing local variable names with one- or two-character names. For example, suppose you have the following function:
function sum(num1, num2) {
return num1 + num2;
} YUI Compressor changes this to:
function sum(A,B){return A+B;}
Note that the two local variables, num1 and num2, were replaced by A and B, respectively. Since YUI Compressor actually parses the entire JavaScript input, it can safely replace local variable names without introducing code errors. The overall function continues to work as it did originally since the variable names are irrelevant to the functionality. On average, the YUI Compressor can compress files up to 18% more than JSMin.
These days, it’s common to use a minification tool plus HTTP compression to further reduce JavaScript file size. This results in even greater savings than using either method alone.
Boosting minification
A couple of years ago, as I started debugging large amounts of production code, I realized that the YUI Compressor didn’t apply variable replacement to a fairly significant portion of my code. Bothered by what I considered a lot of wasted bytes, I explored coding patterns to boost the YUI Compressor’s minification powers. I presented my results, Extreme JavaScript Compression with YUI Compressor, internally at Yahoo!.
In my investigation, I discovered coding patterns that prevented YUI Compressor from performing variable name replacement. By modifying or avoiding these coding patterns, you can improve the YUI Compressor’s performance.
JavaScript’s evil features
Anyone who has followed Douglas Crockford’s writing or lectures knows about the “evil” parts of JavaScript: The parts that are confusing and/or that prevent us from writing clean code that performs well. The eval() function and the with statement are the two most egregious examples of evil JavaScript. Though there are other considerations, both of these features force YUI Compressor to stop replacing variables. To understand why, we need to understand the intricacies of how each works.....