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