2011/03/19

Bucles rápidos en javascript

Hola, hoy os voy a contar varias maneras de hacer lo mismo, pero mejor. Bucles en javascript.
Todos estamos acostumbrados a hacerlos así:
for(i = 0; i < Obj.length; i++){}
Pero esa no es la manera mejor. Se puede mejorar haciendo lo siguiente que es un 20% más rápido
for(i = 0, ii = Obj.length; i < ii; i++){}
Pero espera, que aún puede ser mejor. Un 50% más rápido
for(i = 0, ii = Obj.length; ii--;){}

Otras alternativas de cómo hacer bucles...
for(var i = -1; ++i < Obj.length; ){}
Una variación algo más rápida
for(var i = -1, ii = Obj.length; ++i < ii; ){}

La velocidad de cada uno se puede ver en la siguiente gráfica:

Y de premio, una manera mejor de recorrer un array de objetos
while (p = o[i++]) { ... }

Como muy bien ha señalado Sócrates en su comentario, no queda claro en la gráfica qué bucle es cuál, por lo que lo mejor es mirar el jsperf que compara todas las variantes con datos actuales:

http://jsperf.com/loops/146

3 comentarios:

  1. Perdona pero este artículo es un poquito confuso ¿Al final cual es la rutina más rápida, la del 50%, la alternativa o la "algo más rápida"? ¿Y que tiene que ver esas rutinas con lo que sale en la comparativa de la imagen con el nombre de futurama, coolguyloop, etc? ¿podrías aclararlo por favor? Gracias.

    P.D. para comentar es bastante pesado, al final he tenido que crearme una cuenta, quizás si activases los comentarios anónimos tendrías más feedback de los visitantes.

    ResponderEliminar
    Respuestas
    1. Hola Sócrates, ciertamente tienes toda la razón, tendría que especificar cuál es cual :)
      Lo mejor es que le eches un ojo al jsperf que compara la mayoría de las variantes de bucles javascript con los navegadores más actuales, más teniendo en cuenta que ésto se escribió en el 2011 y desde entonces los navegadores han avanzado una barbaridad...

      http://jsperf.com/loops/33

      Sobre los comentarios anónimos, ahora mismo le echo un ojo, pero vista fijación de Google con su Google+ no las tengo todas conmigo.

      Y muchas gracias por comentar! ;)

      Eliminar
    2. Perdón, el enlace es bastante antiguo, el último estable es:
      http://jsperf.com/loops/146

      Al final de la página se ven las revisiones del jsperf ;)

      Eliminar