Friday, January 15, 2010

jquery poised to gain on GWT's compiler, thanks to, um ... Google

Buried in the jquery 1.4 release announcement, under the Miscellaneous section, is the following tidbit:

Now use Closure Compiler instead of YUI Min (commit)

So what is Closure Compiler? According to the project page at Google Labs,

"The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls."

According to the commit message, switching from YUI Compressor to Google Closure Compiler reduced the filesize by 13% with no other changes.

But wait, there's more!

A 13% bump is not bad, and certainly no one is surprised these days when Google one-ups Yahoo. But it gets better: jquery is so far only using Closure Compiler in Standard Optimizations mode (the default setting). It is not yet using the more aggressive Advanced Optimizations. With advanced optimizations enabled, Closure Compiler also:

  1. renames global variables and function names to make them shorter,
  2. removes unused functions, and
  3. inlines references where possible, including function calls, constants, and variables.

The catch is...

In order to use Advanced Optimizations safely, you need to tell Closure Compiler which symbols are actually calls to external code (externs) and which symbols need to be preserved as public API so that other libraries can reference them (exports). In the case of exports, it still shortens the symbol names everywhere they are used, but it sets up a single alias with the public name.

Setting up externs and exports takes time, effort, and testing, and it's probably the reason why jquery isn't using advanced optimizations just yet. Still, the source code is out there in plain sight and anyone can do it. So it's only a matter of time before jquery gains some of the same compiler optimizations that lend GWT its performance advantage.

Of course, for the code you write on top of jquery to also leverage Closure Compiler, you will have to add it to your build step and use it on your own javascript code as well.

4 comments:

Anonymous said...

jQuery has been made even faster by using .. guess what .. GWT.

Have a look at

https://wave.google.com/wave/#restored:wave:googlewave.com!w%252B9rTSb7ZkBlL

http://code.google.com/events/io/2010/sessions/faster-apps-faster-gwt-compiler.html#

IMO you should have a look at GWT now that 2.0 is out.

Anonymous said...

You say JQuery is using the G W T compiler... well it is using the Closure compiler. But if this is also a GWT compiler... so is GWT really using the Google Closure compiler? This would mean that it first compiles Java to JavaScript, then uses the Closure Compiler to compile this compiled Javascript again?

Jeoff Wilks said...

You're correct, jquery is using the Closure Compiler. It is not the same compiler as the GWT Compiler, but they were both built for the same reasons. I did not say that jquery is using the GWT compiler; in fact I took great care not to say that, but perhaps I didn't state it clearly enough.

When I wrote this post, I said that the move to using Closure Compiler opens the door to compiling jquery with the same types of optimizations that the GWT compiler uses. To get those optimizations, you need to create a list of externs, and you'll see if you follow that link that a lot of that work has since been done.


If you love statically-typed languages then you should be paying attention to the GWT Compiler. If you love Javascript but want all the same performance optimizations, then Closure Compiler is for you.

Jeoff Wilks said...

In fact, take a look at this jQuery 1.4.2 extern file ticket. "This file is auto-generated from http://api.jquery.com/api/ ". Chad Killingsworth has done some great work here.