JavaScript investigando la mejor optimización para crear rangos

2 minutos

Javascript

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é?

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...