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.

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 Don Kseso Kseso

Comentarios: 3

  1. Muy bueno!! Siempre nos ayudas a despejar muchas dudas y explicas cosas que muchos dan por sabidas pero los menos técnicos desconocemos.
    danijfox

    ResponderEliminar
  2. No me quedo muy claro... En la carga de una página ¿como se daría un reflow o repaint?

    ResponderEliminar
  3. A ver si soy capaz de aclararte algo más estos dos conceptos, George.

    Tengamos 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

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap