While I’m a great fan of Javascript Libraries like Prototype and Mootools, I’m less happy with their iterators. Iterating through a large array just takes ages using Array.each(). I think the most annoying thing with Javascript is that it freezes the browser while it’s being processed. So I started Aptana and wrote a small benchmark, and I tested it with FF2, Opera 9.1 and IE6. I did the testing on WinXP SP2 running on my crappy AMD Duron 1600 (yes, it’s almost antique). In this article I present the results of the benchmark.

The Loops

I wrote seven different loops that looped an Array of size 100.000. Here are some parts of the benchmark code: 

//the dataset:
var data = new Array();
for(var i = 0; i < 200000; i++){
	data[i] = "This is a sampleData element!";
}

...

//What's following is a summary of the benchmark
var tmp;

//1. Native For-Loop
var tmp;
for(var i = 0; i < data.length; i++){tmp = data[i];};

//2. Native For-In-Loop
for(var i in data){tmp = data[i];};

//3. Improved Native For-Loop
for(var i = data.length - 1; i >= 0; i-\-){tmp = data[i];};

//4. Native While-Loop
var i = 0;
while(i < data.length){tmp = data[i]; i++;}

//5. Improved Native While-Loop
var i = data.length;
while(i >= 0){tmp = data[i]; i-\-;}

//6. Prototype Each-Loop
data.each(function(el,index){});

//7. Mootools Each-Loop
data.each(function(el,index){});

The results

These are the results:

Test / Browser Firefox 2.0 Opera 9.1 Internet Explorer 6
Native For-Loop 155 (ms) 121 (ms) 160 (ms)
Native For-In-Loop 901 (ms) * 8613 (ms)
Improved Native For-Loop 115 (ms) 100 (ms) 130 (ms)
Native While-Loop 160 (ms) 130 (ms) 150 (ms)
Improved Native While-Loop 120 (ms) 100 (ms) 110 (ms)
Prototype Each-Loop 1031 (ms) 731 (ms) 17034 (ms)
Mootools Each-Loop 361 (ms) 301 (ms) 16474 (ms)

* For some reason Opera didn’t like the For-In loop. The browser crashed when the size of the data Array was 100.000 but when the size was 5000 it took something like 3 seconds.

Conclusion?

Firefox and Opera are doing a great job when executing these loops, while IE is noticeably slow. My advice is to stick with native For-Loops. The improved native For-Loop has the best performance but only use it when it doesn’t matter if the elements are accessed backwards, otherwise use the normal For-Loop. As for the libraries, you can see the Mootools Array.each is at least two times as fast as Prototypes one.

Update

Recently I found a huge javascript benchmark put together by Jason Orendorff. He tests the declaration of variables, objects, functions, arrays etc. His examples are really useful!