Performances of JavaScript Compressors

JavaScript compression is one of most important missions to optimize the performance of web page. Besides minifying the size of JavaScript source code/files (minify JS/compress JavaScript files) to decrease the time for loading, some JavaScript compressors also make many optimizations (compress) for your JavaScript source code.

Today in this post, jsB@nk would like to show you comparison results of some popular JavaScript compressors: Packer 3.1, YUI Compressor, Google Closure, Dojo Shrinksafe and JSMin. This comparison just made with two test units: compression ratio and processing time. Please go to the full post page for detailed comparison results.


Sampled by © JavaScriptBank.com

So following on from last weeks post I have taken a closer look at the common tools used to compress JavaScript. Below is a graph of the compression ratios that these tools achieved when applied to ext-all-debug.js, the uncompressed JavaScript from the popular ExtJS framework :

Some points to note are:

  • GZip is rather different from the other forms of compression in that it a compression of the content rather than the JavaScript, and therefore can be applied to compressed JavaScript. I have included it in the graph to provide an indication of the level of compression it can provide.
  • The simple compilation option was used with Google Closure as this is typically the one that will be used. For a discussion on why, check out the excellent post on A Log of Javascript.
  • Packer is similar to GZip in that it is more a compression of the content rather than JavaScript itself. Unlike GZip however, it has a runtime cost associated with the unpacking of the JavaScript on each page load.

Below is a graph of the processing time required for the above compressions:

Aside from Packer, there is not a lot of difference, and since all of the processing is done before deployment the compression cost does not impact the performance of the JavaScript.

The final graph below shows the compression ratios where each of the compressed JavaScript files are then GZipped, as is more typical of production environments.

In the final analysis it is clear that you should GZip your JavaScript, although be aware that not all browsers correctly handle GZipped content. As to which of the other compression tools you use, it comes down to your JavaScript. My experience showed Packer to produce the best results for ext-all-debug.js whereas Julien found that the YUI Compressor is a better choice for jQuery. CompressorRater can help with this task although it does not yet include Google Closure.

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future
The Ultimate Checklist for HTTP to HTTPS Migration


Top view articles
65 Free JavaScript Photo Gallery Solutions
Top 10 Beautiful Christmas Countdown Timers
Top 50 Most Addictive and Popular Facebook mini games
Best Free Linux Web Programming Editors
Top 10 Free Web Chat box Plug-ins and Add-ons
50+ Beautiful Resources of HTML Form using CSS and JavaScript
Top 10 Best JavaScript eBooks that Beginners should Learn
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com