Javascript eficiente para modificaciones DOM

Digamos que tengo un archivo HTML que quiero procesar usando Javascript. Por ejemplo:Javascript eficiente para modificaciones DOM

añadir algunos elementos DOM, como span o div envoltorios.
Cambie el estilo del documento un poco, como el tamaño de fuente base, altura de línea, etc.
Use un agente de autenticación para agregar  entidades.

¿Cuál sería la forma más eficiente de hacerlo, es decir, me gustaría hacerlo con una cantidad mínima de reflows.

El caso ideal sería hacer que el código JS se ejecutara incluso antes del primer diseño. es posible? Sé que, en general, es una mala idea ejecutar secuencias de comandos costosas antes de que la página se haya mostrado, ya que esto dejaría la página en blanco durante un tiempo y es una experiencia realmente mala. Sin embargo, voy a necesitar esto para trabajar fuera de línea y esto no sería un problema para mi proyecto.

O, ¿hay alguna manera de hacer todas las modificaciones dom en un grupo, es decir, un reflujo que se activará después de que todas las alteraciones hayan finalizado?

Fuente

2012-07-07 Albus Dumbledore

Hay varias maneras. El objetivo principal de todos ellos es que acabes causando uno o al menos el menor número de reflujos/repintados.

Off-DOM elemento

se puede trabajar con elementos sin anexar al DOM, y luego simplemente añadir todo junto una vez que todo está establecido.

El único problema con esto es si su código necesita referenciar dimensiones de compensación, ya que los elementos que aún no están en el DOM no tienen ninguno.

var container = document.createElement('section'); //not in the DOM yet 
//do some extensive work here to prepare the doc 
document.body.appendChild(container); //now we go to the DOM, causing a single re-paint

fragmento Doc

A más formal, y la posible mejora, variación de este tema sería document fragments, que aportan un beneficio de rendimiento (al parecer). En realidad, son un segundo DOM separado que no tiene pantalla.

cadena

Probablemente el más rápido de todos ellos sería para construir el documento como una cadena. La implicación obvia es que no puede usar los métodos DOM, pero si está contento con el manejo de cadenas y REGEX'ing (no es ideal en HTML, por supuesto), podría valer la pena considerarlo.

Por último, si la velocidad es esencial y tiene MUCHO de cómputo o manejo de cadenas para hacer, es posible que desee aprovechar los trabajadores de la web. No pueden hablar directamente con DOM, pero pueden subcontratar tareas y, lo que es más importante, funcionan de manera asincrónica en un hilo separado.

Fuente

2012-07-07 10:46:09 Utkanos

Creo que depende del navegador decidir luego refluir el contenido. Y tratan de no hacerlo hasta que finalice la ejecución del script. Es importante tener en cuenta que cuando, por ejemplo, anexa div al cuerpo del documento, causa recálculos de DOM. Y para eso puede usar documentFragment para agregar elementos y luego fragmentarse en el cuerpo. Aunque si en su caso sucede que necesita agregar 1 elemento a diferentes contenedores, no ayudará mucho.

lectura adicional sobre DocumentFragment: http://ejohn.org/blog/dom-documentfragments/

Fuente

2012-07-07 10:42:09

-1

Creo que no puede trabajar en el estilo o los elementos DOM antes de cargar la página. Primero se carga y luego comienza la página de ajustes. Cargaría la página ocultamente y lo mostraré. maneras de ocultar:

todo lo cargue fuera de pantalla de coordenadas X/Y, entonces u ponerlo a 0,0
DIV, que tienen contenidos datos de la página de estilo: Pantalla: Ninguno o la visibilidad: oculto http://www.w3schools.com/css/css_display_visibility.asp cheque aquí para detalles.
Puede cargar la página dentro de un iframe de 1 píxel, usted como propietario de la página principal tiene control sobre la página secundaria. Después de finalizar los ajustes, cambia el tamaño del iframe, oculta su marco.
Utilice el índice Z y coloque DIV no transparente transparente o negro que lo oculte todo. Quítelo cuando esté listo

Elija lo que mejor se adapte a su estilo.

Fuente

2012-07-07 10:46:17

Aunque esta es una respuesta muy viejo todavía recomiendo que no vincula a w3schools.com debido a esto: http://www.w3fools.com/ :) –

Elimine documentElement del document, modifíquelo y agréguelo al document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>...</title>   
    </head> 
    <body> 
     <script type='text/javascript'> 
var docElem = document.documentElement, 
    parentNode = docElem.parentNode, 
    nextSibling = docElem.nextSibling; 
parentNode.removeChild(docElem); // reflow 
// ... 
docElem.lastChild.appendChild(docElem.ownerDocument.createElement('hr')); 
// ... 
parentNode.insertBefore(docElem, nextSibling); // reflow 
     </script> 
    </body> 
</html>

Esto activa dos reflujos y cero a dos repintes adicionales.

jsFiddle

Fuente

2012-07-07 11:32:58 Saxoier

Javascript eficiente para modificaciones DOM

Respuesta

Cuestiones relacionadas