UPDATE: Check out my last post on the matter: <a title=”JavaScript Performance: JsPerf.com Myths” href=”http://codecoding.com/javascript-performance-jsperf-com-myths/” target=”_blank”>JavaScript Performance: JsPerf.com Myths</a>
EDIT: Related post -> JavaScript Performance: Loops 2, JavaScript Performance: Loops 3

Today, I will start a series of posts dedicated to javascript performance tricks and I will begin with some insights into javascript loops.

Let’s prepare the scenario:

var col = []; // array with 1000 items
var t = 0; //counter
//let's fill the array.
for (var c = 999; c >= 0; c--) {
  col = c;
};

This is how a traditional javascript loop looks like:

var t=0;
for (var i = 0; i<= col.length; i++) {
	t++;
};

Well, we have several options here to improve this loop. One of them is caching the value of the array length into a variable in order to stop this value from being evaluated in every loop’s iteration. Just like this:

var t=0;
for (var i = 0, len=col.length; i<= len; i++) {
	t++;
};

I have prepared this performance example for you to see the difference.

Now, I will show you yet another way to improve this loop that will work even faster in most browsers:

var t=0;
for (var i = col.length;i>=0; i--) {
	t++;
};
Warning! Bear in mind that every browser has its own javascript implementation so some performance tests may vary.

As you will be able to see here, reversed loops use to be the most efficient in almost any case.

At last, I will show you one of the most expensive loops you will find in javascript, so try not to use it unless necessary. We’re talking about the for in loop:

var t=0;
for (var i in col) {
	t++;
};

Tests in Chrome