javascript - ¿Cuál es la diferencia entre reflujo y repintado?
performance repaint (3)
No estoy muy claro sobre la diferencia entre reflujo + repintado (si hay alguna diferencia)
Parece que el reflujo puede estar cambiando la posición de varios elementos DOM, donde el repintado simplemente está representando un nuevo objeto. Por ejemplo, podría producirse un reflujo al eliminar un elemento y se produciría una nueva pintura al cambiar su color.
¿Es esto cierto?
Aquí hay otra gran publicación: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom
Un repintado, o redibujado, recorre todos los elementos y determina su visibilidad, color, contorno y otras propiedades de estilo visual, luego actualiza las partes relevantes 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 introdujo cuando se produce el reflujo y cómo minimizar el reflujo.
En mi opinión, el repintado solo afecta el DOM en sí, pero el reflujo afecta a toda la página.
Repintado se produce cuando algunos cambios que solo sus estilos de piel, como el color y la visibilidad.
El reflujo ocurre cuando la página de DOM cambia su diseño.
Recientemente encontré que un sitio puede buscar qué atributo activará el repintado o el reflujo. http://csstriggers.com/
Esta publicación parece cubrir los problemas de reflujo frente a repintar el rendimiento
En cuanto a las definiciones, desde esa publicación:
Se produce un repintado cuando se realizan cambios en el aspecto de un elemento que cambia visiblemente, pero no afecta su diseño.
Ejemplos de esto incluyen
outline,visibility,backgroundocolor. Según Opera, el repintado es costoso porque el navegador debe verificar la visibilidad de todos los otros nodos en el árbol DOM.Un reflujo es aún más crítico para el rendimiento porque implica cambios que afectan el diseño de una parte de la página (o toda la página).
Los ejemplos que causan reflujos incluyen: agregar o eliminar contenido, cambiar explícita o implícitamente el
width, elheight,font-familyfont-size,font-sizey más.
Aprende qué efectos CSS-propiedades repintan y revisa en http://csstriggers.com/