10 Consejos Javascript aumenta el rendimiento de Nicolás Zakas Parte 2

6. Evite  para-en bucles

Aquí hay otro  blanco y negro en el rendimiento : no  utilice for-in loops.

La lógica detrás de esto es bastante sencilla: en vez de recorrer a través de una serie de índices como lo haría con un for o do-while , un for-in no sólo podría recorrer los elementos de la matriz adicional, sino que también requiere un mayor esfuerzo.

Con el fin de bucle a través de estos artículos, JavaScript debe establecer una función para cada uno. Esta basado en la iteración función que  viene con un montón de problemas de rendimiento: una función adicional se presenta con un contexto de ejecución correspondiente que se crea y destruye, en la parte superior de los cuales es un objeto agregado adicional a la cadena de ámbito de aplicación.

7. Combine las condiciones de control y cambios de control variable cuando use  loops

Siempre hablando sobre el rendimiento, evitar el trabajo en los bucles es un tema candente. Así que si hay mejoras de rendimiento que se tenía, lo más probable es ver la mayor alza en los bucles.

Una forma de sacar ventaja de esto es combinar su condición de control y variables de control cuando se define el bucle. Aquí hay un ejemplo que no se combina estos controles:

for ( var x = 0; x < 10; x++ ) {
};

Antes de añadir nada en absoluto a este circuito, hay un par de operaciones que se producen cada iteración.

Sin embargo, si usted es justo interactuando sobre algunos elementos de una matriz, se puede cortar una de las acciones a mover de un tirón esta iteración alrededor y utilizando un bucle while:

var x = 9;
do { } while( x-- );

8. Definir conjuntos de objetos de colección HTML

Javascript utiliza una serie de objetos de colección, tales como HTML document.forms. document.images , etc Además, estas se llaman por métodos tales como getElementsByTagName y getElementsByClassName .
Al igual que con cualquier selección de DOM, los objetos HTML colección son bastante lentos, sino también vienen con problemas adicionales. A medida que el Nivel 1 del DOM especificación dice, “las colecciones en el DOM HTML se supone que viven, lo que significa que se actualizan automáticamente cuando el documento subyacente es modificado”.

Esto es horrible.

Si bien parecen objetos de colección arreglos, ellos son algo muy distinto: los resultados de una consulta específica. Cada vez que este objeto se tiene acceso para leer o escribir, esta consulta tiene que ser volver a ejecutar, que incluye la actualización de todos los aspectos periféricos del objeto como su length ,
la recogida de objetos HTML son extremadamente lentos. Además, estos objetos de la colección puede conducir a bucles infinitos en el que no podría esperar. Por ejemplo:

var divs = document.getElementsByTagName('div');

for (var i=0l i < divs.length; i++ ) {
    var div = document.createElement("div");
    document.appendChild(div);
}

Esto provoca un bucle infinito porque divs representa una recopilación en vivo HTML, en lugar de una matriz, como se podría esperar. Esta colección se actualiza en vivo cada vez que añada un nuevo <div> a la DOM, asi i < divs.length nunca termina.

La forma de evitar esto es definir estos elementos en una matriz, que es un poco más complejo que la simple creación var divs = document.getElementsByTagName('div'); . Aquí hay un script Zakas utiliza para forzar a una matriz:

function array(items) {
    try {
        return Array.prototype.concat.call(items);
    } catch (ex) {

        var i       = 0,
            len     = items.length,
            result  = Array(len);

        while (i < len) {
            result[i] = items[i];
            i++;
        }

        return result;
    }
}

var divs = array( document.getElementsByTagName('div') );

for (var i=0l i < divs.length; i++ ) {
    var div = document.createElement("div");
    document.appendChild(div);
}

9. Deje de tocar el DOM, maldita sea!

Dejando solo el DOM es otro gran tema en la optimización de Javascript. El ejemplo clásico es añadir una serie de elementos de la lista: si agrega cada uno de estos a la DOM de forma individual, es considerablemente más lento que añadir todos a la vez. Esto se debe a las operaciones DOM son caros.
Zakas entró en gran detalle sobre este tema, explicando que las operaciones de DOM son recursos pesada debido a reflujo . Reflujo es básicamente el proceso mediante el cual el navegador de nuevo hace que los elementos DOM en la pantalla. Por ejemplo, si cambia el ancho de un div con JavaScript, el navegador tiene que volver a cargar la página final a la cuenta de este cambio.
Cada vez que un elemento se agrega o se quita de la DOM, reflujo se producirá. La solución para esto es un objeto muy práctico Javascript, documentFragment , que me sentí mejor de no haber usado después de Steve Souders admitió lo mismo.
DocumentFragment es básicamente un fragmento del documento-como que no se representa visualmente por el navegador. Al no tener representación visual proporciona una serie de ventajas, sobre todo puede añadir nodos a un DocumentFragment sin incurrir en ninguna de reflujo navegador.

10. Cambiar las clases no los estilos CSS

Usted puede haber oído que el cambio de clases de CSS es más óptimo que los estilos cambiantes. Nos encontramos entonces con otro problema de reflujo: cada vez que un estilo de diseño se cambia, se produce reflujo.
estilos de plantilla para decir cualquier cosa que pueda afectar al diseño y la fuerza al navegador a reflujo. Por ejemplo, width , height , font-size , float , etc
Ahora no me malinterpreten, clases CSS no evitar reflujo, simplemente reducirlo al mínimo. En lugar de incurrir en una pena de reflujo cada vez que cambie un estilo determinado, puede utilizar una clase CSS para cambiar un número de estilos a la vez, ya su vez sólo se incurrirá en una sola reflujo.
Así que tiene sentido utilizar nombres de clases de rendimiento CSS siempre que cambie más de un estilo de diseño. Además, también es óptima para agregar un nodo de estilo a la DOM , si es necesario definir una serie de clases sobre la marcha.