Repaint y Reflow: ¡me lo aclare, por favor! 19.10.15
Repaint y Reflow: sus semejanzas, diferencias y el porqué es mejor evitarlos.
Repaint y Reflow: ¡me lo aclare, por favor!
Repaint y Reflow son dos expresiones habituales y muy comunes en cualquier artículo. Posíblemente la primera (repaint) más veterana y conocida que la segunda (reflow). Se viene utilizando desde hace mucho.
El segundo término, reflow, es de aparición y uso más reciente. Y aunque parecidas en cuanto a qué implican, quizás para unos cuantos no esté muy clara la diferencia entre ellas.
De eso va este corto artículo: qué es y en qué se diferencia el repaint del reflow.
Repaint y Reflow
Los Repaints y Reflows son los procesos que tiene que hacer el navegador cuando el valor de una propiedad de Css o un elemento del Html cambia después de crearse (dicho elemento) en el DOM del documento por primera vez.
Repaint
El repaint o redibujado ocurre cuando el cambio no afecta a la estructura del elemento, sólo a su apariencia.
Un típico repaint o redibujado sería un cambio de color del texto. O del background de un elemento.
Reflow
El reflow o ¿reordenación/reflujo? conlleva un cambio en la estructura del elemento que lleva aparejado un cambio en la estructura de la página. Se altera su composición.
Un ejemplo de reflow se da al cambiar el tamaño de una caja. A no ser que esté completamente fuera del flujo del documento, la variación de su tamaño supone una alteración del resto de elementos del documento.
Tanto el repaint como el reflow pueden ser originados por el Css o por el uso de js.
Y la recomendación por rendimiento, es procurar evitar el que se produzcan, especialmente en el proceso de la carga primera del documento. Conllevan un retardo en la carga de la página. Especialmente el reflow.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Muy bueno!! Siempre nos ayudas a despejar muchas dudas y explicas cosas que muchos dan por sabidas pero los menos técnicos desconocemos.
ResponderEliminardanijfox
No me quedo muy claro... En la carga de una página ¿como se daría un reflow o repaint?
ResponderEliminarA ver si soy capaz de aclararte algo más estos dos conceptos, George.
ResponderEliminarTengamos un sólo elemento en una página, por ejemplo un enlace y tras cargarse la página hacemos un :hover sobre él:
Si sólo cambiamos el fondo es un Repaint
Si al hacer el over aumentamos su tamaño (variación del width o añadimos un margen o borde que antes no tenía) es un Reflow.
En este segundo caso la estructura de la página ha sido modificada (un elemento ha variado de tamaño). En el primero sólo afectamos su estética y no tiene mayor incidencia en él o en otros elementos.
En el reflow la modificación realizada suele implicar cambios en otros elementos también (si los hay en la página, claro).
Un saludo