Implicazioni sulle prestazioni dell'uso dello stile funzionale Javascript vs "procedurale"

Question

Qualcuno ha fatto un benchmarking o può collegarsi a un articolo su questo argomento? Particolarmente interessato ai risultati IE, in quanto solitamente le prestazioni JS non rappresentano un problema in altri browser.

Vorrei sapere quanto più lento è quello di fare qualcosa di simile:

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

invece del tipico:

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); 
} 

Io, ovviamente, preferisco lo stile funzionale, ma suppongo extra l'overhead di chiamare una funzione extra per ogni oggetto potrebbe rallentare le cose con grandi collezioni.

Grazie!

Answer 1

Non contento della mancanza di prove su questo argomento, ho scritto un breve punto di riferimento. È tutt'altro che perfetto, ma penso che risponda alla domanda.

L'ho eseguito in IE 8/win, e mentre il metodo funzionale è più lento, non sarà mai il collo di bottiglia nel codice reale. (A meno che non si sta facendo cose che non si dovrebbe fare nel client in ogni caso)

Quindi userò l'approccio più pulito ogni volta che ho a prendere (yay)

(Best of 5)
metodo funzionale: 453ms
vecchio approccio della scuola: 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

Questo è davvero interessante:

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

Tuttavia, nei motori di JS ECMAScript5-ready con nativo Array.map(), le cose possono cambiare drasticamente.

Answer 3

Questo è molto interessante anche:

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

I risultati variano da browser a browser, perché underscore tenta di utilizzare l'alternativa nativa laddove disponibile.