Implicaciones de rendimiento del uso de estilo funcional Javascript vs "procedural"

Question

¿Alguien ha hecho benchmarking, o puede vincular a un artículo sobre este tema? Particularmente interesado en los resultados de IE, ya que generalmente el rendimiento de JS no es un problema en otros navegadores.

me gustaría saber cuánto más lenta que es hacer algo como:

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

en lugar de la típica:

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

, obviamente, yo prefiero el estilo funcional, pero asumo el extra sobrecargar una función adicional para cada elemento podría ralentizar las cosas con grandes colecciones.

Gracias!

Answer 1

No contento con la falta de pruebas sobre este tema, escribí un breve punto de referencia. Está lejos de ser perfecto, pero creo que responde la pregunta.

Lo ejecuté en IE 8/win, y aunque el método funcional es más lento, nunca será el cuello de botella en código real. (A menos que estés haciendo cosas que no debe hacer en el cliente de todos modos)

Así que va a utilizar el enfoque más limpio cada vez que tengo que escoger (yay)

(el mejor de 5)
método funcional: 453ms
enfoque de la vieja escuela: 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

Ésta es realmente interesante:

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

Sin embargo, en los motores de JS ECMAScript5-listos con Array.map() nativa, las cosas pueden cambiar drásticamente.

Answer 3

Esto es muy interesante también:

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

Los resultados varían de un navegador a otro, porque el subrayado intenta usar la alternativa nativa donde esté disponible.