JavaScript investigando la mejor optimización para crear rangos

Tenía una duda técnica: ¿cual es la mejor forma de crear un rango en JavaScript? ¿Array.from? ¿[...Array]? ¿map? ¿Un bucle como for? Por ello decidí poner a prueba Node, Chrome, Firefox y Chromium; ¿cual sería el más rápido? Los resultados te sorprenderán.

El test no es nada del otro mundo, crear un Array entre 0 y 9999999:

[0, 1, 2, 3, ..., 9999999]

Un total de 10 millones de valores que irán incrementándose, pero con diferentes estrategias. ¡Empecemos!

Forma 1

Array.from({length: iterations}, (v, i) => i);

Resultados:

• Node: 531 ms
• Chrome: 455 ms
• Firefox: 187 ms
• Chromium: 495 ms

Forma 2

[...Array(iterations).keys()];

Resultados:

• Node: 416 ms
• Chrome: 453 ms
• Firefox: 472 ms
• Chromium: 351 ms

Forma 3

Array(iterations).fill().map((v, i) => i);

Resultados:

• Node: 140 ms
• Chrome: 133 ms
• Firefox: 378 ms
• Chromium: 162 ms

Forma 4

let myRange4 = [];
for(let i = 0; i < iterations; i++) myRange4.push(i);

Resultados:

• Node: 158 ms
• Chrome: 98 ms
• Firefox: 1428 ms
• Chromium: 86 ms

Código utilizado

¿Quieres comprobar los resultados por ti mismo? Copia y pega el siguiente código en la consola del navegador.

const iterations = 10 ** 7;

console.time('Function #1');
const myRange1 = Array.from({length: iterations}, (v, i) => i);
console.log(myRange1.length);
console.timeEnd('Function #1');

console.time('Function #2');
const myRange2 = [...Array(iterations).keys()];
console.log(myRange2.length);
console.timeEnd('Function #2');

console.time('Function #3');
const myRange3 = Array(iterations).fill().map((v, i) => i);
console.log(myRange3.length);
console.timeEnd('Function #3');

console.time('Function #4');
let myRange4 = [];
for(let i = 0; i < iterations; i++) myRange4.push(i);
console.log(myRange4.length);
console.timeEnd('Function #4');

Mis conclusiones y elección

Me ha llamado la atención que Node sea más lento que Chrome o Chromium, a pesar de ser una versión reducida y enfocada a ejecutar JavaScript. Después el poco equilibrio entre Firefox y navegadores basados en Chromium, en diferentes funcionalidades son más o menos rápidos.

Contestando a la pregunta. ¿Con cual me quedo? Sin duda usar un bucle, la forma 4, es el código con mejor rendimiento, pero no todo es potencia… ya que su sintaxis es peligrosa porque puede provocar un ciclo sin límites. Por lo que me decanto por la forma 3, la plata en rendimiento y oro en flexibilidad: una estructura más funcional y sencilla de gestionar. En otras palabras, usar un fill seguido de un map para añadir los índices.

¿Y tú? ¿Con cual te quedas y por qué?