Nick Berardi's Coder Journal

If you know what these numbers mean, you known why I am typing them today.  If you don’t then go here to find out.

Posted in News | | No Comments »

Today I just noticed that my blog’s CDN (Google AppEngine) was failing to resolve.  After a little research I realized that WebSense, a corporate web filtering software and scourge of intranet users that need to be productive, had decided that the IP Address range that Google AppEngine uses should be completely blocked.  And because most corporate IT departments just blindly apply the WebSense rules that they are sent, with out first verifying that they make sense; my blog is completely without JavaScript and CSS on these corporate networks.

The good news however is that I now know that my blog gracefully downgrades and is still very readable without JavaScript or CSS running.

This is an important test you should run on your blog.  Because this is how search bots, screen readers, and blocked content users will see your blog.  A couple tips to keep in mind when designing your website, in order for it to be readable when under any of the circumstances that I previous listed are:

1. Make sure the main content of the page is the first element right below your header.
2. Make sure to use as many standard HTML elements as possible, such as H1, H2, H3, EM, STRONG, B, I, and etc. This will keep you website looking good when CSS fails.
3. Make sure that reading of content is not reliant on JavaScript, because if JavaScript is turned off or the client doesn’t support JavaScript (search bots, screen readers, etc), then your website will be unreadable.

Does your site gracefully fail?

Posted in How To | | No Comments »

In my first post about JavaScript compression and the different levels supported by the three major competitors in the JavaScript minimization, obfuscation, and optimization tools space.  I the article I discussed which tool provided the best compression in regards to the resulting byte count.  And found that Google took the over all crown with Microsoft following very closely behind.  A comment posted on that article by Eric J. Smith of Code Smith, provided a nice lead in to my second article in this series, he posted this comment:

So if you haven’t guessed it yet by the title and then by Eric’s comment this post is going to be on the optimizations provided by the tools.  So lets get started…

Setup

Back in October I saw an interesting article on this same subject comparing Yahoo and Microsoft on site called Ajaxian. But at the time Microsoft AJAX Minimizer was only on RC6, and as of this article is at version 1.1, so somethings have changed and I wanted to provide a more relevant comparison which included Google too. I borrowed Ajaxian’s code they used to test the different tools for my own experiment in this article.

function notCalled(text) {
	alert(text);
}
/**
 * @license comment
 */
var o = (function(){
var o = {};
var b = "on";
var c = "on" + b + "mouse";
var d = c + 1000 + "on";
var x = o[d];
/*!
important comment
*/
var i = 1000;
o["on" + "click"] = function(){};
o["on" + "mouse" + "over"] =
o["on" + "mouse" + "out"] =
o["on" + "mouse" + "move"] = o["on" + "click"];
o["on" + "click"] = o["on" + "click"];
if(i)
i++
;
return o
})();

The above code is designed to test many different aspects of optimization.  Including:

1. Code that is not called from anywhere.
2. Preservation of Licenses, Copy Rights, and any other important comments.
3. Frequently used string literal combination.
4. Understanding of logic, to remove repeated and unnecessary dynamic access.
5. Number compression.  (changing 1000 to 1e3)
6. Get rid of the gibberish variables at the beginning of the function that serve no purpose.

Simple Compression

First things first lets just see how each of them handle simple compression, with out any optimizations enabled on each tool.  I did that by running the following:

# Ajax Minifier
ajaxmin.exe test.js -o output.js

# YUI Compressor
java -jar yuicompressor-2.4.2.jar --nomunge --preserve-semi --disable-optimizations -o output.js test.js

# Google Closure
java -jar compiler.jar --compilation_level WHITESPACE_ONLY --js test.js

Above produces the following output

// Ajax Minifier
function notCalled(text){alert(text)}var o=function(){var o={},b="on",c="on"+b+"mouse",d=c+1e3+"on",x=o[d],i=1e3;o["onclick"]=function(){};o["onmouseover"]=o["onmouseout"]=o["onmousemove"]=o["onclick"];o["onclick"]=o["onclick"];if(i)i++;return o}()

// YUI Compressor
function notCalled(text){alert(text);}var o=(function(){var o={};var b="on";var c="on"+b+"mouse";var d=c+1000+"on";var x=o[d];
/*
important comment
*/
var i=1000;o["on"+"click"]=function(){};o["on"+"mouse"+"over"]=o["on"+"mouse"+"out"]=o["on"+"mouse"+"move"]=o["on"+"click"];o["on"+"click"]=o["on"+"click"];if(i){i++;}return o;})();

// Google Closure
/*
 comment
*/
function notCalled(text){alert(text)}var o=function(){var o={};var b="on";var c="on"+b+"mouse";var d=c+1E3+"on";var x=o[d];var i=1E3;o["on"+"click"]=function(){};o["on"+"mouse"+"over"]=o["on"+"mouse"+"out"]=o["on"+"mouse"+"move"]=o["on"+"click"];o["on"+"click"]=o["on"+"click"];if(i)i++;return o}();

Some interesting things I noticed about the above code is:

• Yahoo was the only tool who preserved the “*!” comment block and Google was the only one who preserved the “**” comment block.
• Google and Microsoft both changed the number 1000 into 1e3. 
• Microsoft combined the strings together, that were next to each other.
• Yahoo added some extra parentheses, around the if(i)i++; statement.

Simple Optimization

Next we are going to look at some basic optimizations made by each tool.  I again did that by running the following:

# Ajax Minifier
ajaxmin.exe -h test.js -o output.js

# YUI Compressor
java -jar yuicompressor-2.4.2.jar -o output.js test.js

# Google Closure
java -jar compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --js test.js

Above produces the following output

// Ajax Minifier
function notCalled(a){alert(a)}var o=function(){var a={},c="on",d="on"+c+"mouse",e=d+1e3+"on",f=a[e],b=1e3;a["onclick"]=function(){};a["onmouseover"]=a["onmouseout"]=a["onmousemove"]=a["onclick"];a["onclick"]=a["onclick"];if(b)b++;return a}()

// YUI Compressor
function notCalled(a){alert(a)}var o=(function(){var h={};var e="on";var j="on"+e+"mouse";var g=j+1000+"on";var a=h[g];
/*
important comment
*/
var f=1000;h.onclick=function(){};h.onmouseover=h.onmouseout=h.onmousemove=h.onclick;h.onclick=h.onclick;if(f){f++}return h})();

// Google Closure
/*
 comment
*/
function notCalled(a){alert(a)}var o=function(){var a={},b=1E3;a.onclick=function(){};a.onmouseover=a.onmouseout=a.onmousemove=a.onclick;a.onclick=a.onclick;b&&b++;return a}();

Some interesting things to note about this new code is:

• Yahoo and Google still keep their respective comment blocks. 
• Google and Microsoft both still changed the number 1000 into 1e3. 
• Google and Yahoo show a better understanding of the code by changing the dynamic event hash mappings in to actual bound properties.  Microsoft still  only combines the strings together.
• All of the tools obfuscated the variable names.
• Microsoft and Google both combined the three variables at the beginning of the method in to a one statement.
• Anybody notice the optimization that Google did b&&b++ instead of if(b)b++, this shows a really good understanding of the code.
• On the other had Yahoo added some extra parentheses, again, around the if(i)i++ statement, but dropped the extra semi-colon.
• Google was the only one who got rid of the gibberish variables at the beginning of the function that served no purpose.

Best Optimizations

Next we are going to check out the best possible combination of options for each tool to produce the most optimized code.  We will produce this with the following:

# Ajax Minifier
ajaxmin.exe -hc test.js -o output.js

# YUI Compressor
java -jar yuicompressor-2.4.2.jar -o output.js test.js

# Google Closure
java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js test.js

You may have noticed that we are using the same commands for Yahoo, this is on purpose, because Yahoo really doesn’t have a simple state the compares to the other tools. 

The following output was produced

// Ajax Minifier
function notCalled(a){alert(a)}var o=function(){var d="click",c="mouse",a="on",b={},f=a,g=a+f+c,h=g+1e3+a,i=b[h],e=1e3;b[a+d]=function(){};b[a+c+"over"]=b[a+c+"out"]=b[a+c+"move"]=b[a+d];b[a+d]=b[a+d];if(e)e++;return b}()

// YUI Compressor
function notCalled(a){alert(a)}var o=(function(){var h={};var e="on";var j="on"+e+"mouse";var g=j+1000+"on";var a=h[g];
/*
important comment
*/
var f=1000;h.onclick=function(){};h.onmouseover=h.onmouseout=h.onmousemove=h.onclick;h.onclick=h.onclick;if(f){f++}return h})();

// Google Closure
/*
 comment
*/
(function(){var a={},b=1E3;a.onclick=function(){};a.onmouseover=a.onmouseout=a.onmousemove=a.onclick;a.onclick=a.onclick;b&&b++;return a})();

Some interesting things to note about this code is:

• Yahoo and Google still keep their respective comment blocks. 
• Google and Microsoft both still changed the number 1000 into 1e3. 
• Google and Yahoo still show a better understanding of the code by changing the dynamic event hash mappings in to actual bound properties. 
• Microsoft combined the “click”, “mouse” and “on” strings in to variables that are concatenated together in the variables and event references.
• All of the tools still obfuscated the variable names.
• Microsoft and Google still both combined the three variables at the beginning of the method in to a one statement.
• Google still kept the b&&b++ instead of if(b)b++.
• Yahoo added some extra parentheses, again, around the if(i)i++ statement, but dropped the extra semi-colon.
• Google still was the only one who got rid of the gibberish variables at the beginning of the function that served no purpose.
• Google removed the notCalled function, since it was not being used in this script file.  This is good and bad, because if you referenced this from the outside, then this will cause problems when you try to use it.

Final Word

Even though Google ADVANCED_OPTIMIZATIONS scored the highest and Microsoft with –hc turned on scored second on my last post.  I think Google with SIMPLE_OPTIMIZATIONS turned on is my current favorite for providing a good balance between optimization, compression, and compatibility with the original version.  Closely followed by Yahoo with out any configuration options turned off.  These two placed #3 and #5, respectively, in my previous post.

Even though Google with ADVANCED_OPTIMIZATIONS, did the best overall, it still scares me a little for the following reasons that I mentioned last time:

There are a couple things that should be noted about Google Closure with Advanced Options, which may not make the most beneficial option for you to choose when you are trying to minify your files.

1. Removal of Code You Want to Keep
2. Inconsistent Property Names
3. Compiling Two Portions of Code Separately
4. Broken References between Compiled and Uncompiled Code

Here are the files that resulted from the above testing:

1. test.js
2. microsoft.js
3. microsoft-h.js
4. microsoft-hc.js
5. yahoo-all.js
6. yahoo.js
7. google-w.js
8. google-s.js
9. google-a.js

So which of the following optimizations do you feel the most comfortable with?

Tags: AJAX Minifier, Closure Compiler, Google, JavaScript, Microsoft, Optimization, Yahoo, YUI, YUI Compressor

Posted in JavaScript, Review | | No Comments »

A little more than a year and half ago I created a MSBuild Task for the YUI Compressor that was very well received, and even highlighted on the YUI Compressor site.  At the time of writing that article YUI Compressor was king of the hill, and for the most part the only game in town that was really designed for production level use.  Since then a number of new competitors have been released by Google and Microsoft, and I wanted to see how they stacked up against the YUI Compressor.

Setup

For these tests I wanted to test a pretty complex set of JavaScript to really stretch the limits of each of the optimizers. So I choose jQuery 1.4 as the subject for the tests.  I choose jQuery for many reasons, but the biggest is because it is very well known set of code for most developers, and it would be very easy for anybody to test in their applications.

The setup of my machine is as follows:

• Windows 7 Pro (x64)
• Java 6 Update 17
• .NET 3.5 SP1

Each optimizer and the version:

• Microsoft Ajax Minifier 1.1
• Google Closure Compiler Revision 26
• Yahoo YUI Compressor 2.4.2

Testing

I ran the following from the command line on jQuery 1.4 raw source code to produce the following files.  Here is the raw source code file that I used in my testing:

• jquery-1.4.js

Microsoft

ajaxmin jquery-1.4.js -o microsoft.js

• microsoft.js

Microsoft (Hypercrunch)

ajaxmin -h jquery-1.4.js -o microsoft-h.js

• microsoft-h.js

Microsoft (Hypercrunch Combine Literals)

ajaxmin -hl jquery-1.4.js -o microsoft-hc.js

• microsoft-hc.js

Google (Whitespace)

java -jar compiler.jar --compilation_level WHITESPACE_ONLY --js jquery-1.4.js

• google-w.js

Google (Simple)

java -jar compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --js jquery-1.4.js

• google-s.js

Google (Advanced)

java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js jquery-1.4.js

• google-a.js

Yahoo

java -jar yuicompressor-2.4.2.jar jquery-1.4.js -o yahoo.js

• yahoo.js

Yahoo (Minified Only)

java -jar yuicompressor-2.4.2.jar jquery-1.4.js --nomunge -o yahoo-m.js

• yahoo-m.js

Yahoo (Disabled Optimizations)

java -jar yuicompressor-2.4.2.jar jquery-1.4.js --disabled-optimizations -o yahoo-o.js

• yahoo-o.js

Yahoo (Preserve Unnecessary Semicolons)

java -jar yuicompressor-2.4.2.jar jquery-1.4.js --preserve-semi -o yahoo-s.js

• yahoo-s.js

Results

The above testing produced the following results.

The results are pretty clear of who won the top prizes in the above results.  Out of the top 5 ranking outputs Google and Microsoft both took two of the positions and Yahoo took 1. Google Closure Compiler placed first when the Advanced Options were enabled which did really surprise me that much, and Microsoft AJAX Minifier placed second when Hypercrunch and Combine Literals were turned on.  The Microsoft ranking, however was very surprising to me because of the lack-luster reviews of RC6 that was released back in October.

There are a couple things that should be noted about Google Closure with Advanced Options, which may not make the most beneficial option for you to choose when you are trying to minify your files.

1. Removal of Code You Want to Keep
2. Inconsistent Property Names
3. Compiling Two Portions of Code Separately
4. Broken References between Compiled and Uncompiled Code

Because of how the file is being optimized, it alters your code and would require you to do extra testing before deployment and it would make the resulting output almost impossible to debug against your un-minified version.  So for these reasons it may not be the best choice, if you value ease of testing over byte size of your files.

So which ever option out of Microsoft, Google, or Yahoo you decide to use, all will produce a much more optimized-for-size file than the original. And, in my opinion, if you are already using Yahoo in your build environment there really isn’t much of a reason to switch, unless you are in the top tier of websites and need to squeeze every byte out of the file for delivery over the internet.

Personally, I am going to keep using YUI Compressor, because it has been rock solid in producing minimized and obfuscated code for my current projects, but in the future I may consider going with Microsoft or Google depending on what I am trying to accomplish.

Tags: AJAX Minifier, Closure Compiler, Google, JavaScript, Microsoft, Yahoo, YUI, YUI Compressor

Posted in JavaScript, Review | | 9 Comments »