DHTML and JavaScript Performance Tuning

Using JavaScript

Variables

Local Variables are the Fastest Type of Variables
Use Local Variables to Store an Object Reference Chain
Eliminate Unnecessary Variables
Declare and Assign Variables in the Same Statement

Local Variables are the Fastest Type of Variables

Ease

Effectiveness

Overall Practicality

M	IE	S	Op
3	2	2	?

The cost of looking up a local variable is less than the cost of looking up a global variable. When a method uses the same variable more than once, introducing a local temporary variable will usually improve the performance.

If the global object chain is stored in a local variable, then performance will be improved even more. See also Shorten Object Chains.

Demo ->

Local Variables are the Fastest Type of Variables.

Use Local Variables to Store an Object Reference Chain

Eliminate Unnecessary Variables

If a variable is used only once, it can (and usually should) be eliminated.

For example:

    function checkPass() {
        var signupForm = document.forms[0];
        var checkBox = signupForm.elements["pass"];
        checkBox.checked = true;
    }

Should be changed to:

    function checkPass() {
        document.forms[0].elements["pass"].checked = true;
    }

The Exception

In general, anytime a variable is used only once, it should be eliminated. The exception to this is with very long object references that become difficult to follow:

  // Awkward long references are harder to read.
    function setSlot0Title(text) {
        getElementsWithClass(document.getElementById("slots"), "div", 
                                                                "window")[0]
              .getElementsByTagName("li")[0]
              .getElementsByTagName("h2")[0].firstChild.nodeValue = text;
    }


  // By using a "slots" and "win" variables, the code is easier to read, 
  // though it may be slower by a few milliseconds.
    function setSlot0Title(text) {
        var slots = document.getElementById("slots");
        var win = getElementsWithClass(slots, "div", "window")[0];
        win.getElementsByTagName("li")[0]
        .getElementsByTagName("h2")[0].firstChild.nodeValue = text;
    }

Such long object references usually don't show up when the program uses caching and lazy initialization.

Declare and Assign Variables in the Same Statement

Ease

Effectiveness

Overall Practicality

M	IE	S	Op
3	2	2	?

Declaring the variable at the top of the method is a holdover from C. Many programmers still declare all of their variables at the beginning of a method or function. This is bad practice because it reduces code clarity.

The general rule of thumb is to declare and assign a variable with one statement in the narrowest possible scope.

Declaring and assigning a variable in the same statement also offers a slight performance boost because the variable is referenced only once.

function initializeMenu(){
// Don't do this
    var menulist;
    var i, j, k;
    var itemList;
    var arrow;
    var spanList;

    menuList = getElementsWithClass(document, "div", "menu");
    for(i = 0;i < menuList.length; i++) {
        itemList = getElementsWithClass(menuList[i], "a", "menuItem");
        for(j = 0;j < menuList.length; j++)
         ...
    }
}

Declaring the variable at the top of the method means makes the code less clear because it is difficult to know what the variable is actually used for. It is also less efficient, although only marginally so.

function initializeMenu(){
// Do this

    var menuList = getElementsWithClass(document, "div", "menu");
    for(var i = 0;i < menuList.length; i++) {
        var itemList = getElementsWithClass(menuList[i], "a", "menuItem");
        for(var j = 0;j < menuList.length; j++)
         ...
    }
}