Cómo optimizar sus aplicaciones JavaScript usando Loops

Todos quieren aplicaciones de alto rendimiento, por lo que en esta publicación aprenderemos cómo lograr ese objetivo.

Una de las cosas más fáciles y descuidadas que puede hacer para mejorar el rendimiento de sus aplicaciones JavaScript es aprender a escribir correctamente declaraciones de bucle de alto rendimiento. La idea de este artículo es ayudar con eso.

Veremos los principales tipos de bucles utilizados en JavaScript y cómo podemos escribirlos de manera eficaz.

¡Vamos a empezar!

Rendimiento de bucle

Cuando se trata del rendimiento del bucle, el debate siempre gira en torno a qué bucle utilizar. ¿Cuál es el más rápido y el más eficaz? La verdad es que, de los cuatro tipos de bucles proporcionados por JavaScript, solo uno de ellos es significativamente más lento que los demás: for-inbucle. La elección del tipo de bucle debe basarse en sus requisitos y no en cuestiones de rendimiento .

Hay dos factores principales que contribuyen al rendimiento del bucle: el trabajo realizado por iteración y el número de iteraciones .

En las secciones siguientes, veremos cómo, al disminuirlas, podemos tener un impacto general positivo en el rendimiento del bucle.

En bucle

ECMA-262 (la especificación que define la sintaxis y el comportamiento básicos de JavaScript), la tercera edición, define cuatro tipos de bucles. El primero es el forbucle estándar , que comparte su sintaxis con otros lenguajes similares a C:

for (var i = 0; i < 10; i++){ //loop body}

Esta es probablemente la construcción de bucle de JavaScript más utilizada. Para entender cómo podemos optimizar su trabajo, necesitamos analizarlo un poco.

Disección

El forbucle consta de cuatro partes: inicialización, condición de prueba previa, cuerpo del bucle y ejecución posterior. Su funcionamiento es el siguiente: primero se ejecuta el código de inicialización (var i = 0;). Luego la condición previa a la prueba (i <10;). Si la condición de prueba previa evalúa to true, entonces se ejecuta el cuerpo del ciclo. Después de eso, se ejecuta el código de ejecución posterior (i ++).

Optimizaciones

El primer paso para optimizar la cantidad de trabajo en un ciclo es minimizar el número de miembros de objeto y búsquedas de elementos de matriz.

También puede aumentar el rendimiento de los bucles invirtiendo su orden. En JavaScript, invertir un bucle da como resultado una pequeña mejora del rendimiento de los bucles, siempre que elimine operaciones adicionales como resultado.

Ambas declaraciones anteriores son válidas también para los otros dos bucles más rápidos ( whiley do-while).

// original loop for (var i = 0; i < items.length; i++){ process(items[i]); } // minimizing property lookups for (var i = 0, len = items.length; i < len; i++){ process(items[i]); } // minimizing property lookups and reversing for (var i = items.length; i--; ){ process(items[i]); }

Mientras bucle

El segundo tipo de bucle es el whilebucle. Este es un ciclo de prueba preliminar simple, que consta de una condición de prueba previa y un cuerpo de ciclo.

var i = 0; while(i < 10){ //loop body i++; }

Disección

Si la condición de prueba previa se evalúa true, se ejecuta el cuerpo del bucle. Si no, se omite. Cada whilebucle se puede reemplazar por fory viceversa.

Optimizaciones

// original loop var j = 0; while (j < items.length){ process(items[j++]); } // minimizing property lookups var j = 0, count = items.length; while (j < count){ process(items[j++]); } // minimizing property lookups and reversing var j = items.length; while (j--){ process(items[j]); }

Bucle de ejecución

do-whilees el tercer tipo de bucle y es el único bucle posterior a la prueba en JavaScript. Se compone de bucle corporal y condición posterior a la prueba:

var i = 0; do { //loop body } while (i++ < 10);

Disección

En este tipo de bucle, el cuerpo del bucle se ejecuta siempre al menos una vez. Entonces se está evaluando la condición posterior a la prueba y, si es así true, se ejecuta otro ciclo de bucle.

Optimizaciones

// original loop var k = 0; do { process(items[k++]); } while (k < items.length); // minimizing property lookups var k = 0, num = items.length; do { process(items[k++]); } while (k < num); // minimizing property lookups and reversing var k = items.length - 1; do { process(items[k]); } while (k--);

Bucle For-In

El cuarto y último tipo de bucle se llama for-inbucle.Tiene un propósito muy especial: enumera las propiedades nombradas de cualquier objeto JavaScript. Así es como se ve:

for (var prop in object){ //loop body }

Disección

Es similar al bucle regularfor solo por su nombre. La forma en que funciona es totalmente diferente. Y esta diferencia lo hace mucho más lento que los otros tres bucles, que tienen características de rendimiento equivalentes, por lo que no es útil tratar de determinar cuál es el más rápido.

Cada vez que se ejecuta el ciclo, la variable proptiene el nombre de otra propiedad, que es una cadena , en la object.Se ejecutará hasta que se hayan devuelto todas las propiedades. Estas serían las propiedades del objeto en sí, así como las heredadas a través de su cadena de prototipos.

Notas

Nunca debe usar “ for-in”para iterar sobre miembros de una matriz .

Cada iteración a través de este bucle provoca una búsqueda de propiedades en la instancia o en el prototipo, lo que hace que el for-inbucle sea mucho más lento que los otros bucles. Para el mismo número de iteraciones, podría ser siete veces más lento que el resto.

Conclusión

  • El for, whiley do-whilelos bucles todos tienen características de rendimiento similares, y por lo tanto hay un solo tipo de bucle es significativamente más rápido o más lento que los demás.
  • Evite el for-inbucle a menos que necesite iterar sobre una serie de propiedades de objeto desconocidas.
  • Las mejores formas de mejorar el rendimiento del bucle son disminuir la cantidad de trabajo realizado por iteración y disminuir el número de iteraciones del bucle .

¡Espero que esto haya sido útil para ti, como lo fue para mí!

Gracias por leer.

Recursos

"JavaScript de alto rendimiento" - Nicholas C. Zakas

Lea más de mis artículos en mihail-gaberov.eu.