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

title of page html

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 se activará el reflujo.

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

El primer artículo dice que el reflujo ocurre cuando:

Cuando recupera una medición que debe calcularse , como acceder a offsetWidth , customerHeight o cualquier valor de CSS calculado (a través de getComputedStyle () en navegadores compatibles con DOM o currentStyle en IE), mientras que los cambios de DOM se ponen en cola para realizarlos.

El segundo artículo dice:

Como se indicó anteriormente, el navegador puede almacenar en caché varios cambios por usted, y volver a inyectar solo una vez cuando se hayan realizado todos los cambios. Sin embargo, tenga en cuenta que tomar medidas del elemento lo obligará 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 medidas se toman usando propiedades como offsetWidth o usando 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.

Considero que esto significa lo mismo que dijeron antes. 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, solo crea lo que ambos dicen cuando dicen que los tres tipos de interacciones pueden causar reflujo.

Aclamaciones.

Answer 2

Consulte la sección "Representación desencadenada por acceso de lectura de propiedad" de Comprender el comportamiento de representación de Internet Explorer , donde el siguiente código en IE causará actividad de representación.

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

Answer 3

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

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