Cómo escribir JavaScript de alto rendimiento

1.DOM

1.1 Utilice DocumentFragment para optimizar múltiples anexos

Descripción: al agregar múltiples elementos dom, primero agregue los elementos a DocumentFragment y luego agregue elementos a la página en el DocumentFragment unificado.

DocumentFragment se agrega a la página.

Este método reduce el número de veces que la página muestra elementos dom. Al realizar pruebas en IE y Fx, al agregar 1000 elementos, la eficiencia se puede mejorar entre 10 y 30, siendo la mejora en Fx más obvia.

Antes de usar:

for (var i = 0; i lt; 1000; i) {

var el = document.createElement('p') ;

el.innerHTML = i;

document.body.appendChild(el);

}

Después de tomar: p>

var frag = document.createDocumentFragment();

for (var i = 0; i lt; 1000; i) {

var el = document. createElement( 'p');

el.innerHTML = i;

frag.appendChild(el);

}

documento .body .appendChild(frag);

1.2 Clonar a través de elementos de plantilla en lugar de createElement

Descripción: Clonar nodos a través de objetos dom de plantilla es más eficiente que crear elementos directamente. La ganancia de rendimiento es mínima, alrededor de 10. No hay ninguna ventaja para crear y agregar operaciones con menos de 100 elementos.

Antes:

var frag = document.createDocumentFragment();

for (var i = 0; i lt; 1000; i) {

var el = document.createElement(' p');

el.appendChild(el);

}

document.body.appendChild (frag);

1.3 Utilice una única asignación de HTML interno en lugar de crear un elemento dom

Descripción: al crear un estilo de lista a partir de datos, utilice un método para establecer el HTML interno de la lista. contenedor que es más fácil que construir un elemento dom y agregarlo a la página es mucho más eficiente.

Antes de tomarlo:

var frag = document.createDocumentFragment();

for (var i = 0; i lt; 1000; i) {

var el = document.createElement(' p');

el.innerHTML = i