2010-03-30 8 views
44

Estoy un poco claro en la diferencia entre el reflujo + repintar (si hay alguna diferencia en absoluto)¿Cuál es la diferencia entre reflujo y repintado?

parece como reflujo podría estar cambiando la posición de los diferentes elementos DOM, donde se acaba de pintar la prestación de un nuevo objeto. P.ej. El reflujo se produciría cuando se elimine un elemento y se produciría el repintado al cambiar su color.

¿Es esto cierto?

Respuesta

55

El anuncio parece cubrir el reflujo vs rendimiento repinte emite

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

En cuanto a las definiciones, a partir de ese mensaje:

Un repinte se produce cuando se realizan cambios a una elementos que cambian visiblemente, pero no afectan a su diseño .

Ejemplos de esto incluyen outline, visibility, background, o color. Según Opera, volver a pintar es caro porque el navegador debe verificar la visibilidad de todos los demás nodos en el árbol DOM.

Un reflujo es aún más crítico para el rendimiento porque se trata de cambios que afectan la disposición de una parte de la página (o toda la página).

Ejemplos que causan reflujos incluyen: adición o eliminación del contenido, explícita o implícitamente el cambio de width, height, font-family, font-size y más.

Aprende qué propiedades CSS-efecto repintar y el examen en http://csstriggers.com

+0

Perfecto, gracias! –

+0

Justo en el punto. ¡Gracias! –

5

En mi opinión, volver a pintar solo afecta a la propia DOM, pero reflujo afecta a toda la página.

La reparación se produce cuando hay algunos cambios que solo afectan a los estilos de la máscara, como el color y la visibilidad.

El reflujo se produce cuando la página de DOM cambia su diseño.

Recientemente encontré que un sitio puede buscar qué atributo desencadenará el repintado o el reflujo. http://csstriggers.com/

4

Aquí hay otro gran post: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

un repintado, o redibujo, pasa a través de todos los elementos y determina sus otras propiedades de estilo visuales visibilidad, color, esquema y, a continuación, actualiza las partes pertinentes de la pantalla

Un reflujo calcula el diseño de la página.Un reflujo en un elemento vuelve a calcular las dimensiones y la posición del elemento, y también desencadena nuevos reflujos en los elementos, ancestros y elementos de ese elemento que aparecen después del DOM. Luego llama a una pintura final. La reposición es muy costosa.

También se presenta cuando se produce reflujo y cómo minimizar el reflujo.

Cuestiones relacionadas