Why does minified or obfuscated JavaScript perform worse than uncompressed code?

javascript, minify, obfuscation, performance

Solution

First let me play devil's advocate: The code does not actually "perform" anything (nothing serious I mean, except for JS Packer). It's essentially a definition of functions, objects and properties.

JS Packer does not produce JavaScript code but rather compressed text that has to be unpacked at runtime. That's why it's much slower. Google Closure using Advanced Optimization replaces identifiers whenever possible. So there already has to be a performance advantage when parsing the script.

That said it is possible to sacrifice performance for code size. One example is replacing `true` and `false` with `!0` and `!1`. It depends on the JavaScript engine though. It could be optimized by the engine before the first call, after it, after some calls, never ... who knows ;)

New Findings

I did some profiling in the meantime and realized that I forgot one thing: garbage collection. The influence can be enough to explain some of the differences between the scripts and the browsers (different engines!).

Combine that with the fact that the code doesn't do much and you have something. In one test I had a CPU Time for garbage collection of about 3% for uncompressed and 9%(!) for JSMin. Which means completely different results for almost equal code.

Even newer findings

When you run JSMin first it's faster than uncompressed. I tried this several times and always got the same result. This confirms the previous findings. I am pretty confident now, that we found the solution.

Problem

I came across this performance report of JavaScript code compressed using various minifiers and obfuscators. What is surprising is that apart from Closure advanced mode, in most cases all other minifiers output code that performs worse than uncompressed code. How do we explain that? Scroll down to the end of the page to see the report. Here are screenshots: Legend: - Blue - YUI Compressor - Red - Closure (advanced mode) - Orange - Closure (basic mode) - Green - JS Min - Purple - JS Packer - Light Blue - UglifyJS - Pink - Uncompressed code

Original source