Web Design Sydney

Loops

Hands up if you love loops? Good stuff, loops make our lives simple, but they can also make your code amazingly slow if not done right. In JavaScript again we have a few very common loops that are defined for us.

• for
• for-in (slow)
• do-while
• while
• for each (slow)

Yes that is right, the ‘for-in’, and the ‘for each’ loops are slow, avoid them altogether if you can, you are far better off not using them if you can get away with it, and I will explain why shortly.

Now onto the good loops, which is the fastest you may ask? Well none are significantly faster than the others, so use for, do-while and while all you want, but here are the ways in which we make these fast loops faster!

• Decrease the amount of work done per iteration
• Number of iterations

The above don’t vary by loop type! So they are extremely important to optimisation. Here is an example of slow loops and fast loops.

Slower Loops

{code type=php}
for (var i=0; i < values.length; i++) {
process(values[i]);
}

var j=0;
do {
process(values[j++]);
} while (j < values.length); var k=0; while (k < values.length) { process(values[k++]); }; {/code} This first loop is slow because you have a terminal condition being evaluated each time (i < values.length) that is also looking up a property type, an incremental value being evaluated each time (i++) and of course the body processing the value (process(values[i]);).

Faster loops

{code type=php}
var len = values.length

for (var i=len; i–) {
process(values[i]);
}

var j = len-1;
do {
process(values[j]);
} while (j–);

var k=len;
while (k–) {
process(values[k]);
}
{/code}

Here we have basically flipped the loops, going from the last item in the array to zero, allowing us to remove extra work in the terminal conditions. These loops are around 50% faster than the ones above. They use less object property lookups by assigning a local variable (var len = values.length), and have less work to do evaluating the terminal conditions.

A note of for each loops

Typical for each loop

{code type=php}
values.forEach(function(value, index, array) {
process(value)
});
{/code}

The problems here are

• Your introducing an additional function
• Now remember functions require execution context created, destroyed
• Function also create an additional object in the scope chain
• The function is a closure

These loops can take up to 8 times as long as a regular for loop! So really try hard to avoid function based iteration.

Pages: 1 2 3 4