Performance Implikationen der Verwendung von Functional style Javascript vs "prozedurale"

Question

Hat jemand Benchmarking getan, oder kann auf einen Artikel zu diesem Thema verlinken? Besonders interessiert an IE-Ergebnissen, da in der Regel JS-Performance kein Problem in anderen Browsern ist.

Ich möchte wissen, wie viel langsamer es so etwas wie zu tun ist:

var numbers = [1, 2, 3, 4, 5, 6, 7]; 
var results = numbers.map(function() { 
    // do some stuff 
}); 

anstelle der typischen:

var numbers = [1, 2, 3, 4, 5, 6, 7]; 
var results = []; 

for (var i = 0; i < numbers.length; i++) { 
    var number = numbers[i]; 
    var result; 
    // do some stuff 
    results.push(result); 
} 

ich natürlich den funktionalen Stil bevorzugen, aber ich nehme die extra Overhead des Aufrufs einer Extra-Funktion für jedes Element könnte die Dinge bei großen Sammlungen verlangsamen.

Danke!

Answer 1

Nicht zufrieden mit dem Mangel an Beweisen zu diesem Thema, schrieb ich einen kurzen Benchmark. Es ist bei weitem nicht perfekt, aber ich denke, es beantwortet die Frage.

Ich lief es in IE 8/win, und während die funktionale Methode langsamer ist, wird es nie der Flaschenhals in echten Code sein. (Es sei denn, Sie tun Dinge, die Sie sollten nicht ohnehin im Client tun)

Also werde ich den Reiniger Ansatz werden, wenn ich wählen muss (yay)

(Best of 5)
funktionale Methode: 453ms
Old school Ansatz: 156ms

Array.prototype.map = function(fun) { 
    var len = this.length >>> 0; 
    if (typeof fun != "function") 
    throw new TypeError(); 

    var res = new Array(len); 
    var thisp = arguments[1]; 
    for (var i = 0; i < len; i++) { 
    if (i in this) 
     res[i] = fun.call(thisp, this[i], i, this); 
    } 

    return res; 
}; 

/** 
* 
* 
*/ 

// Initialize test array 
var numbers = []; 
for (var i = 0; i < 100000; i++) numbers.push(i); 

// Benchmark! 
var start = +new Date(); 

// Test 1 
var results1 = numbers.map(function(num) { 
    return num + num; 
}); 

alert('1. Functional map:' + (start - new Date())); 
start = +new Date(); 

// Test 2 
var results2 = []; 
for (var j = 0, l = numbers.length; j < l; j++) { 
    var num = numbers[j]; 
    results2.push(num + num) 
} 

alert('1. Old school approach' + (start - new Date())); 
start = +new Date(); 

Answer 2

Dieses ist wirklich interessant:

http://www.slideshare.net/madrobby/extreme-javascript-performance

jedoch in ECMAScript5-ready JS Motoren mit nativer Array.map(), die Dinge drastisch ändern können.

Answer 3

Das ist sehr interessant zu:

http://documentcloud.github.com/underscore/test/test.html

Die Ergebnisse variieren von Browser zu Browser, da Unterstriche versuchen, die native Alternative zu verwenden, sofern verfügbar.