Resaltado de repintado: ver exactamente qué se redibuja

El panel de renderizado agrupa media docena de superposiciones visuales que responden preguntas que ningún número responde bien. La primera y la más rentable colorea en tiempo real cada región que el navegador vuelve a dibujar. En una aplicación que nadie ha revisado con ella, produce hallazgos en menos de treinta segundos: superficies enteras que se repintan por un cambio de un píxel, animaciones que arrastran a media pantalla, indicadores invisibles que siguen consumiendo trabajo.

Cómo se activa y qué muestra

El panel de renderizado vive en el cajón inferior y se abre por su nombre desde el menú de comandos, que es la única forma de instrucción que no caduca. La primera casilla de la lista activa el resaltado.

A partir de ese momento, cada región que el navegador vuelve a pintar se colorea durante un instante. Interactúa con la página, desplázate, pasa el ratón por encima de las cosas, y observa qué se ilumina.

Lo que hay que mirar son dos cosas: cuánta superficie se colorea y con qué frecuencia. Un destello pequeño en el elemento que cambió es correcto y esperado. Un destello que abarca media pantalla porque cambió el color de un botón es un problema. Un parpadeo continuo sin que nadie toque nada es un desperdicio permanente.

Interpretar lo que se ilumina

Una región mucho mayor que el elemento que cambió. El navegador pinta por regiones rectangulares, no por elementos. Si dos elementos alejados cambian a la vez, la región que los contiene a ambos se repinta entera, incluido todo lo que hay en medio. Y si el elemento que cambia está en la misma capa que un fondo grande, ese fondo se repinta con él.

Toda la ventana iluminándose al desplazarse. Un desplazamiento normal no debería repintar: el contenido ya está pintado y solo se desplaza la superficie. Si toda la ventana parpadea al desplazarse, hay algo que obliga a redibujar en cada fotograma. Los sospechosos habituales son un fondo fijo, una sombra que depende de la posición, un elemento fijo mal aislado, o código que modifica estilos en el manejador de desplazamiento.

Un parpadeo periódico en reposo. Algo se está animando sin que nadie lo pida. Es el hallazgo más frecuente de todos y casi siempre corresponde a un indicador de carga que sigue vivo detrás de otra cosa, o a una animación que continúa fuera del área visible.

Una región que se ilumina al pasar el ratón, mucho mayor que el elemento. Un efecto de hover que cambia una propiedad que afecta a la disposición o al fondo del contenedor.

Los cinco hallazgos habituales

Estos cinco aparecen en casi cualquier aplicación que no haya sido revisada con el overlay, y los cinco tienen arreglos conocidos.

El indicador que nunca muere. Una animación de carga que se oculta cambiando la opacidad a cero o desplazándola fuera de la vista en lugar de quitarla del árbol. Sigue animándose, sigue repintando, y nadie lo ve. Arreglo: quitar el elemento, o al menos aplicarle display: none, que sí detiene las animaciones.

La cabecera fija que arrastra la página. Un elemento fijo sin capa propia obliga al navegador a repintar la zona que ocupa en cada desplazamiento. Arreglo: promoverlo a capa propia con una transformación tridimensional o con will-change, con las precauciones de la lección sobre capas.

El efecto de hover que repinta el contenedor. Cambiar el color de fondo de una fila repinta la fila; cambiar su sombra puede repintar más allá de sus límites; cambiar su tamaño repinta todo lo que se mueve por debajo. Arreglo: preferir propiedades que solo afecten a la composición.

La animación de una propiedad de disposición. Animar el ancho, la altura, el margen o la posición estática obliga a recalcular la disposición y a repintar en cada fotograma, y arrastra a todos los hermanos. Arreglo: animar transformación y opacidad.

El texto que se vuelve a componer. Cambiar cualquier cosa que afecte a la métrica del texto —tamaño de fuente, espaciado, peso— fuerza recomposición y repintado del bloque entero. Es una de las razones por las que la sustitución de fuentes produce un destello enorme al terminar de cargar.

Las tres técnicas de aislamiento

Reducir la superficie repintada es un problema de aislamiento, y hay tres herramientas con precios distintos.

Contención. La propiedad contain le dice al navegador que los efectos de un elemento no salen de sus límites, lo que le permite acotar el trabajo. contain: layout promete que su disposición interna no afecta a nada de fuera; contain: paint promete que su contenido no se pinta fuera de sus límites; contain: strict combina las garantías. Es la herramienta más barata y la más infrautilizada, porque no crea capas ni consume memoria: simplemente da información al motor.

/* Aislar una fila de lista para que su repintado no salga de sus limites */
.fila-de-lista {
  contain: layout paint;
}

/* Saltarse por completo el trabajo de lo que esta fuera del area visible */
.seccion-larga {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

Promoción a capa. Sacar un elemento a su propia capa de composición hace que sus cambios no repinten nada más. Es potente y cuesta memoria de GPU, así que no se aplica en masa.

Reducir la superficie del elemento. A veces la solución más simple: una sombra enorme, un desenfoque de fondo o un degradado a pantalla completa son caros por naturaleza, y el arreglo es que sean más pequeños o que no existan.

Del overlay al arreglo

El procedimiento completo, cuando el overlay señala algo, tiene cuatro pasos.

Uno: identificar el elemento. La región coloreada no dice cuál es el elemento. Con el inspector, señala lo que está dentro de la región y comprueba qué cambia. Un breakpoint de modificación de atributos sobre el candidato confirma quién lo está tocando.

Dos: identificar la propiedad. Qué está cambiando exactamente. El panel de estilos con la vista de computados es lo más rápido, comparando antes y después.

Tres: clasificar esa propiedad. ¿Afecta a la disposición, al pintado, o solo a la composición? Esa clasificación decide todo lo demás, y hay una comprobación empírica que no requiere memorizarla: en el perfil, mira si el cambio produce bloques de disposición, solo de pintado, o ninguno de los dos.

Cuatro: sustituir o aislar. Si hay una propiedad equivalente más barata, se sustituye. Si no la hay, se aísla para que el daño no se propague.