JavaScript Performance Tips

Nicholad Zakas, who wrote this book, recently spoke about JavaScript performance at Google; his presentation was called "Speed Up Your JavaScript" and it's available to view on Youtube.

In the presentation Nicholas covers areas rarely talked about; he takes a low-level approach by explaining what's happening behind the scenes when you do something as simple as creating or requesting a variable in JavaScript. It's not all conjecture though; he has a number of graphs comparing performance across browsers and then details the steps you can take to optimise your code, in order to protect yourself from less-than-satisfactory JavaScript implementations (IE comes to mind).

I'm not obsessed about performance by any means but I do think that the practices shared in his presentation should be followed to the letter. Speed and performance are hot topics on the client-side; our users demand fast and responsive applications/websites.

His advice:

Five key points emerged during the presentation:

• Store out-of-scope variables in local variables.
• Minimise property access.
• Do as little as possible on each iteration of a loop.
• Minimise document reflow by only changing the DOM when absolutely necessary.
• Don't use inline styles unless you're animating.

Store out-of-scope variables in local variables

The idea behind this technique is to minimise the amount of work required to get at the variable you want. The further away it is (in the scope chain) the longer it's going to take to retrieve it. The performance cost is normally marginal but it's still a good practice. Here's an example:

/*--- scope[2] ---*/
 
/* jQuery library is defined up here */
 
var someModule = (function(){
 
    /*--- scope[1] ---*/
 
    var privateProp = 123;
 
    return function() {
 
        /*--- scope[0] ---*/
 
        var jQuery = jQuery; // Speeds up all references to jQuery
 
        /* Do stuff with jQuery */
 
    };
 
 
})();

With each new scope you're getting further and further away from the global scope, so it makes sense to create local variables pointing to global variables (or any variable higher up in the scope chain). Note that this is only worth doing if you're going to be referencing the higher variable more than once in the current scope.

Minimize property access

This is quite an obvious one; when you're going to be retrieving a property more than once you should assign its value to a local variable. For example, caching a method deepely embedded in an object:

var domGet = YAHOO.util.Dom.get;
 
var logo = domGet('logo');
var header = domGet('header');

Do as little as possible on each iteration of a loop

Loops are the first thing people consider when on the topic of performance. There are a few steps you should take to speed up any given loop. First, if at all possible, use a reverse loop; doing so means you can combine the control condition and any control variable changes:

/* Forward loop */
var i = 0;
while ( i < length ) {
    i++;
}
 
/* Reverse loop (faster) */
var i = length;
while (i--) {
    /* No need to increment; it's already been done in the control condition */
}

If you can't use a reverse loop then make sure to do as little as you can get away with on each iteration. Always cache the length property! If you're concerned about performance then don't use iteration-abstractions like jQuery's each or ECMA-262-5's Array.forEach().

Minimise document reflow by only changing the DOM when absolutely necessary

I found this particularly interesting; whenever you change the DOM, in any way, the document is "reflowed" (i.e. the browser re-draws it). This is something you want to avoid. As an example, if you want to change a bunch of things within a table you should first remove that table from the DOM (using parentElement.removeChild), make your changes, and then place it back in the DOM. You can retain a reference to its original previous sibling or parent in order to place it back in the same position:

var table = $('#some-table');
var parent = table.parent();
 
table.remove();
table.addLotsAndLotsOfRows();
parent.append(table);

Changing DOM properties or CSS styles will also cause the document to "reflow". E.g.

jQuery('a').css('color', 'red'); /* Causes multiple reflows! */

/* Only causes one reflow */
jQuery('<style type="text/css"> a { color: red; } </style>').appendTo('head');

I'm not advocating a new <style> tag for every new style - it's just an example.

Another useful technique is to build DOM structures outside of the DOM and then to insert them as one document fragment.

Don't use inline styles unless you're animating

This is really an extension of the last point; minimising document reflows. Instead of applying several styles to many elements just apply a class that's already defined somewhere in your CSS. Ideally inline styles should only be used for animating or for small simple changes.

So, instead of:

jQuery(elements).css({
    color: 'red',
    backgroundColor: 'yellow',
    border: '3px solid #000'
});

Do this:

jQuery(elements).addClass('important');