soy Kseso y esto EsCSS

Repaint y Reflow: ¡me lo aclare, por favor!

Repaint y Reflow: sus semejanzas, diferencias y el porqué es mejor evitarlos.

Repaint y Reflow: ¡me lo aclare, por favor!

·Por Kseso ✎ 3

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: ¡me lo aclare, por favor!

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.

avatar del Editor del blog

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