¿Cuándo ocurre el reflujo en un entorno DOM?

Question

¿Qué tipo de actividades provocarán el reflujo de la página web con DOM?

Parece que hay diferentes puntos de vista. De acuerdo con http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/, sucede

• Cuando agrega o elimina un nodo DOM.
• Cuando aplica un estilo dinámicamente (como element.style.width = "10px").
• Cuando recupera una medición que debe calcularse, como acceder a offsetWidth, clientHeight, o cualquier valor de CSS calculado (a través de getComputedStyle() en navegadores compatibles con DOM o currentStyle en IE).

Sin embargo, de acuerdo con http://dev.opera.com/articles/view/efficient-javascript/?page=3, la toma de los disparadores de medición vuelve a fluir solo cuando ya hay una acción de reflujo en cola.

¿Alguien tiene más ideas?

Answer 1

Ambos artículos son correctos. Se puede suponer con seguridad que cada vez que se hace algo que razonablemente podría requerir las dimensiones de los elementos en el DOM se calcula que desencadenará el reflujo.

Además, por lo que puedo decir, ambos artículos dicen lo mismo.

El primer artículo dice reflujo ocurre cuando:

Cuando recuperar una medida que debe ser calculado, tales como el acceso offsetWidth, clientHeight, o cualquier valor CSS computarizada (a través de getComputedStyle() en navegadores compatibles con DOM o estilo actual en IE), mientras que los cambios de DOM se ponen en cola para ser realizados.

El artículo segundo establece:

Como se dijo anteriormente, el navegador puede almacenar en caché varios cambios para usted y reflujo sólo una vez cuando todos se han hecho esos cambios. Sin embargo, tenga en cuenta que tomando medidas del elemento lo forzará a refluir, por lo que las mediciones serán correctas. Los cambios pueden o no ser repintados visiblemente, pero el reflujo en sí tiene que suceder detrás de las escenas.

Este efecto se crea cuando las mediciones se toman utilizando propiedades como offsetWidth, o el uso de métodos como getComputedStyle. Incluso si los números no se usan, basta con usar cualquiera de estos mientras el navegador todavía está almacenando cambios en el caché, será suficiente para desencadenar el reflujo oculto. Si estas mediciones se toman de forma repetida, debería considerar tomarlas una sola vez y almacenar el resultado, que luego puede usar más adelante.

Tomo esto para decir lo mismo que dijeron anteriormente.Opera hará todo lo posible para almacenar en caché los valores y evitar el reflujo, pero no debe confiar en su capacidad para hacerlo.

Para todos los efectos, simplemente crea lo que ambos dicen cuando dicen que los tres tipos de interacciones pueden causar reflujo.

Saludos.

Answer 2

document.body.style.display = 'none'; 
document.body.style.display = 'block'; 

Esto a menudo resuelve esos errores de diseño incomprensibles.

Answer 3

Consulte la sección "Representación activada por acceso de lectura de propiedad" en Understanding Internet Explorer Rendering Behaviour, donde el siguiente código en IE causará actividad de representación.

function askforHeight() { 
    $("#lower").height(); 
}