The power of JavaScript libraries are increasing everyday, and many more (free) tools are available now than ever before. There are so many easy to use JavaScript addons, that an unwary developer can quickly degrade the performance of their site. To decrease the performance hit when adding additional JavaScript to a site, many developers use compression tools, such as YUI Compressor. At the very least, a compressor remove all white-spaces from your code, but a good one will also obfuscate variable names into shorter ones, which can help to reduce the size of your code even more. Today well cover some techniques that can help to optimize compression.
Use fewer var
The varkeyword is used to bind a variable to a function context (or window, if not inside a function) and is not compressible. However, onevar
can be used to instantiate many variables. For example:var// this is the standard way of defining several variables var test1 = 1; var test2 = {}; var test3 = function() { // function code }; // this will compress better var test1 = 1, test2 = {}, test3 = function() { // function code };
Although, some compressors are attempting to remove unneeded
s, it is simple to just do it yourself. At least 4 bytes can saved pervar
that is removed.YEUse Local Pointers For Large Namespaces
You will see this technique throughout the YUI Library, and in much of the code that I write using YUI. When a large namespace, object, or function (more than 4 characters) is used more than twice inside inside a function context, create a local variable, such as setting "YAHOO.util.Event" to
("var YE = YAHOO.util.Event"). This makes the local code easier to read, as well as allowing the compression obfuscator to rename those local variables to a single character (saving 15 bytes each time the local pointer is used).elem1// uncompressable way to use YAHOO.util.Event (function() { YAHOO.util.Event.on(
,click
function() {/* function code */}); YAHOO.util.Event.on(elem2
,click
function() {/* function code */}); YAHOO.util.Event.on(elem3
,click
function() {/* function code */}); }()); // compressable way to use YAHOO.util.Event (function() { var YE = YAHOO.util.Event; YE.on(elem1
,click
function() {/* function code */}); YE.on(elem2
,click
function() {/* function code */}); YE.on(elem3
,click
function() {/* function code */}); }());_D
If you are in control of all your JavaScript, you may want to create global shortcuts to namespaces or functions that are used frequently.Concatenate Files Before Compression
The compressor can only obfuscate global variables within a given file, not across all files. If you use global variables, then the compression will be better after concatenating all the files together. In this way the obfuscator can rename variables to shorter ones across all the JavaScript code.Use Variable Names to Namespace Instead of Objects
Unfortunately, most obfuscators cannot reduce the names of properties added to an object (this is a really hard problem to solve). For this reason, compression will be better when not storing values in parameters on an object. I am often guilty of this, using objects such as
to store all DOM pointers and_E
to store all event callbacks for function context. In the future I will be prefixing DOM pointers with_dom
and event callback functions with_evt
. This will make the code more verbose, when uncompressed, but each variable will be compressible to a single character.test1// using objects to organize variables (function() { var $ = YAHOO.util.Dom.get; var _D = { test1: $(
), test2: $(test2
) }; var _E = { callback1: function() {/* function code */}, callback2: function() {/* function code */} }; }()); // using variable names to orgnaize (function() { var $ = YAHOO.util.Dom.get; var _domTest1 = $(test1
), _domTest2 = $(test2
), _evtCallback1 = function() {/* function code */}, _evtCallback2 = function() {/* function code */}; }());
This can be the most tedious optimization, and may go against your coding conventions. Use this technique only if you need compress the JavaScript as small as possible.Nick Zakas of YUI also recommends the following, Helping The YUI Compressor.