No tengo claro la diferencia entre reflujo + repintado (si hay alguna diferencia)
Parece que el reflujo podría estar cambiando la posición de varios elementos DOM, donde repintado solo representa un nuevo objeto. Por ejemplo, se produciría un reflujo al eliminar un elemento y se volvería a pintar al cambiar su color.
¿Es esto cierto?
Respuestas:
Esta publicación parece cubrir los problemas de rendimiento de reflujo vs repintado
En cuanto a las definiciones, de ese post:
Un repintado ocurre cuando se realizan cambios en la piel de un elemento que cambia visiblemente, pero no afecta su diseño.
Ejemplos de esto incluyen
outline,visibility,background, ocolor. Según Opera, repintar es costoso 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 implica cambios que afectan el diseño de una parte de la página (o de toda la página).
Ejemplos que causan reflujos incluyen: adición o eliminación del contenido, explícita o implícitamente cambiando
width,height,font-family,font-sizey más.
Aprenda qué efecto de las propiedades CSS se repinta y revise en http://csstriggers.com
Aquí hay otra gran publicación: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom
Un repintado, o redibujado, pasa por 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 más reflujos en los elementos secundarios, ancestros y elementos de ese elemento que aparecen después de él en el DOM. Luego pide un repintado final. El reflujo es muy caro.
También introdujo cuándo se produce el reflujo y cómo minimizar el reflujo.
En mi opinión, repintar solo afecta al DOM en sí, pero el reflujo afecta a toda la página.
El repintado se produce cuando se producen algunos cambios que solo su estilo de piel, como el color y la visibilidad.
El reflujo ocurre cuando la página de DOM cambia su diseño.
Recientemente encontré un sitio que puede buscar qué atributo activará el repintado o el reflujo. http://csstriggers.com/
El reflujo ocurre cuando hay un cambio en el diseño DOM. El reflujo es muy costoso computacionalmente ya que las dimensiones y posiciones de los elementos de la página deben calcularse nuevamente, luego se volverá a pintar la pantalla .
Ejemplo de algo que provocará reflujo
for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';
document.body.appendChild(newEle);
}
El código anterior es muy ineficaz, provocando 100 procesos de reflujo por cada nuevo elemento de párrafo agregado.
Puede mitigar este proceso computacionalmente estresante usando .createDocumentFragment()
const docFrag = document.createDocumentFragment();
for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';
docFrag.appendChild(newEle);
}
document.body.appendChild(docFrag);
El código anterior ahora solo usará el proceso de reflujo 1x para la creación de 100 nuevos elementos de párrafo.
El repintado es simplemente el cambio de píxeles en el monitor, mientras que aún lo grava es el menor de dos males, ya que un reflujo incluye un repintado en su procedimiento.
Gran explicación que encontré aquí .
Reflow: calcula el diseño de cada elemento visible (posición y tamaño). Repaint: muestra los píxeles en la pantalla.