JavaScript Native Loop Performance Comparaison (v14)

Revision 14 of this benchmark created by molokoloco on

Description

Fastest method for looping through an array of 1024 items and do a minimal operation with the new value each time.

Test rendered values here :

http://jsfiddle.net/molokoloco/qeWhB/

In this new test, array is regenerated for each bentchmark because of destructive methods and how jperf perform the test (cf. https://twitter.com/molokoloco/status/443013019548020736)

Preparation HTML

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

Setup

// Get a new copy of the array each time
    var getArray = (function() {
        var arr = [];
        for (var i = 0; i < 1024; i++) arr[i] = i;
        return function() {
            return arr.slice();
        };
    }());
    
    // Fake function with minimal action on the value
    var process = function(value) {
        return value + 1;
    };

Test runner

Ready to run.

Testing in
TestOps/sec
for()
var arr = getArray(); // Get the base array
// Test
for (var i = 0; i < arr.length; i++) { process(arr[i]) }
ready
for() caching
var arr = getArray(); // Get the base array
// Test
for (var i = 0, length = arr.length; i < length; i++) { process(arr[i]) }
ready
for() decrement
var arr = getArray(); // Get the base array
// Reversed
for (var i = arr.length - 1; i >= 0; i--) { process(arr[i]) }
ready
for (..in)
var arr = getArray(); // Get the base array
// Test
for (var key in arr) { process(arr[key]) }
ready
for (..pop()) - reverse order
var arr = getArray(); // Get the base array
// Destructive + Reversed
for (var value = arr.pop(); value || value === 0; value = arr.pop()) { process(value) }
ready
for (..shift()) - keep order
var arr = getArray(); // Get the base array
// Destructive + In order
for (var value = arr.shift(); value || value === 0; value = arr.shift()) { process(value) }
ready
for (..shift()) - keep order + copy
var arr = getArray(); // Get the base array
// In order + copy
var arr2 = arr.slice();
for (var value = arr2.shift(); value || value === 0; value = arr2.shift()) { process(value) }
ready
while() acting like for()
var arr = getArray(); // Get the base array
// Test
var i = 0;
while (i++ < arr.length) { process(arr[i - 1]) }
ready
while() caching
var arr = getArray(); // Get the base array
// Test
var i = 0, length = arr.length;
while (i++ < length) { process(arr[i - 1]) }
ready
while() in decrement
var arr = getArray(); // Get the base array
// Reversed
var length = arr.length;
while (length--) { process(arr[length]) }
ready
while(..pop())
var arr = getArray(); // Get the base array
// Destructive + Reversed + Miss first value
var value;
while(value = arr.pop()) { process(value) }
/* // Correct
var value = arr.pop();
do {
    process(value);
    value = arr.pop();
} while(value || value === 0)
*/
ready
do while()
var arr = getArray(); // Get the base array
// Destructive + In order
var value = arr.shift();
do { process(value); } while(value = arr.shift())
ready
forEach()
var arr = getArray(); // Get the base array
// Test
arr.forEach(function(value) { process(value) })
ready
map()
var arr = getArray(); // Get the base array
// Test
arr.map(function(value) { return process(value) })
ready
$.each()
var arr = getArray(); // Get the base array
// Test
$.each(arr, function(value) { process(value) })
ready
_.each()
var arr = getArray(); // Get the base array
// Test
_.each(arr, function(value) { process(value) })
ready
Generator (JS 1.7)
var arr = getArray(); // Get the base array
// Test
// Fail here but work for me here in FF
// http://jsfiddle.net/molokoloco/qeWhB/
try { eval("[process(arr[key]) for (key in arr )]"); }
catch(e) {}
ready
Only Populate
var arr = getArray(); // Get the base array
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.