JQuery 1.4 was released yesterday. I lifted the text from the release announcement, removed stop words, converted to lowercase, and found the ten most used words:
- jquery (71)
- function (27)
- performance (23)
- object (20)
- events (19)
- element (15)
- ajax (15)
- dom (13)
- json (12)
- request (10)
That’s right, “performance” comes in third ahead of “object”, “element”, and even “dom”. Anyone think jQuery 1.4 had a focus on performance? Here’s what John Resig says.
Performance Overhaul of Popular Methods
Many of the most popular and commonly used jQuery methods have seen a significant rewrite in jQuery 1.4. When analyzing the code base we found that we were able to make some significant performance gains by comparing jQuery against itself: Seeing how many internal function calls were being made and to work to reduce the complexity of the code base.
He includes this chart that shows the reduction of complexity for some popular functions.
Of course, all of this is music to my ears. There was one other specific note that caught my eye in this commit comment:
Switched from using YUI Compressor to Google Compiler. Minified and Gzipped filesize reduced to 22,839 bytes from 26,169 bytes (13% decrease in filesize).
Minifying JavaScript is one of the rules I wrote about in High Performance Web Sites. Back then (2006-2007), the best tool for minifying was JSMin from Doug Crockford. It still might be the best tool today for minifying in realtime (e.g., dynamic Ajax and JSON responses). For minifying static files, YUI Compressor (released in late 2007) does a better job. It also works on CSS. So this move from YUI Compressor to the Google Closure Compiler by John Resig, someone who obviously cares about performance, is a big deal.
For jQuery 1.4, the savings from switching to Compiler was 13%. If you have done comparisons with your code, please add your stats via a comment below.
My last blog post (Stuck inside Classic Rock) got pretty esoteric at the end when I started talking about Quality, and I promised a follow-up post on how that related to web performance. I’m still working on that post, but am happy to take this digression. But is it a digression? I’ve been talking to folks over the past week about how they strive for and compromise on quality in their jobs. We all compromise on quality to a certain degree. But occasionally, a person is afforded the opportunity to dedicate a significant portion of their life to a single-minded purpose, and can reach levels of Quality that standout in comparison. John Resig has achieved that. Congratulations to John and the jQuery team. Keep up the good (high performance) work!
Greg Schechter | 16-Jan-10 at 12:21 pm | Permalink
We don’t use either compiler at Amazon(not that I haven’t tried to convince them otherwise). Using Closure Compiler I saw on average a 10.4% savings gzipped as opposed to 4.6% with YUI Compressor.
My Data: http://spreadsheets.google.com/pub?key=tcQVvzrVDhnT33MxfA3UZow&output=html
stoimen | 19-Jan-10 at 12:33 am | Permalink
Hi Steve,
after reading this post I was amazed to hear about Google Closure Compiler and start doing some tests right away. In the project I’m working on I use both jQuery and OpenLayers javascript libraries. The resulting .js file is really huge and I used YUI Compressor to compress it. The good news is that with the advanced mode turned on Google Closure manage to compress it even more resulting in more than 50% of savings from the original file and with more than 100K more than YUI. The bad news is that this code isn’t working. As it’s well known Closure Compiler is not save in advanced mode and I’m waiting until this happens! Then GCC will be probably the best tool to minify/compress.
John | 19-Jan-10 at 10:07 am | Permalink
Closure Compiler Advanced mode will never be “safe” if you expect to use without changing your code. It gets its size wins by requiring more information than the raw javascript code (all external referenced must be declared in “extern” files and all internally declared names referenced externally must be “exported”. If you invest the time to do this the wins can be massive, 85% or more if you are working with a large library.
Dmitry Chaplinsky | 23-Jan-10 at 1:06 pm | Permalink
Hi Steve.
I performed series of tests on our merges (25 JS files of different size and content) with and without gzip.
Average benefit of closure compiler over YUI for non-gzipped files is 3.04% (0.7%-7.77%), and 2.64% (0.15%-6.52%) for gzipped ones.
Not so big difference :(
I can share spreadsheet, if somebody needs it.