Los superpuestos de renderizado que revelan repintados

Todo lo anterior de este nivel te dice qué animaciones existen y cuándo ocurren. Los superpuestos de renderizado te dicen algo distinto y complementario: qué píxeles se están volviendo a dibujar. Es la única herramienta que responde de forma visual e inmediata a la pregunta que decide el rendimiento de una animación, y basta con activar una casilla.

El panel

En Chromium está en el cajón inferior, pestaña Rendering; si no aparece, sale en el menú de tres puntos del cajón. En Firefox, algunas de estas opciones están en la barra del inspector y otras en el modo de diseño adaptable.

Las opciones que importan para animación, con lo que hace cada una:

Destello de repintado

Es la casilla más valiosa de las DevTools para trabajo de animación y merece explicación de cómo interpretarla.

Al activarla, cada región que el navegador vuelve a pintar se cubre durante un instante con un rectángulo verde translúcido. Ahora dispara tu animación y observa:

No aparece ningún verde mientras el elemento se mueve. La animación está en el compositor: la textura ya está rasterizada y lo único que ocurre es que la GPU la coloca en otro sitio. Es el resultado que quieres, y es la confirmación visual, en un segundo, de lo que de otro modo comprobarías bloqueando el hilo principal.

El elemento destella en verde en cada fotograma. Se está repintando sesenta veces por segundo. La animación no está en el compositor. Las causas son siempre las mismas: estás animando una propiedad que no es transform ni opacity, o el contenido del elemento cambia, o hay un filter que obliga a redibujar, o una librería está escribiendo estilo en línea desde un bucle.

Destella un área mucho más grande que el elemento. El elemento invalidó a sus vecinos. Suele significar que no tiene capa propia y comparte superficie con medio documento, o que una sombra o un filtro extienden la región afectada mucho más allá de la caja.

Destella toda la pantalla. Algo está invalidando la raíz: una custom property heredable animada en :root, una clase que cambia en html, un fondo que se mueve.

Esa clasificación en cuatro casos cubre prácticamente todos los diagnósticos de pintado, y se hace mirando durante dos segundos.

Bordes de capa y estadísticas

Layer borders dibuja un contorno naranja alrededor de cada capa de composición. Lo que hay que mirar no es cuántos contornos hay en reposo, sino cuántos aparecen al interactuar: si al pasar el ratón por una rejilla se encienden treinta contornos, tienes composición implícita en cascada. Dentro de las capas grandes verás además una cuadrícula: son las teselas en que el navegador divide la superficie para rasterizarla por partes.

Frame rendering stats abre un panel flotante con tres datos. Los fotogramas por segundo instantáneos, que sirven para confirmar una caída pero no para diagnosticarla. Si el rasterizado está usando la GPU. Y la memoria de vídeo estimada, que es el número interesante: interactúa con la página y observa si sube y no vuelve a bajar. Una memoria que crece monótonamente con el uso significa capas que se crean y no se liberan, casi siempre por will-change puesto de forma permanente.

Scrolling performance issues resalta los elementos que impiden que el desplazamiento ocurra en el hilo del compositor, y explica el motivo al pasar el ratón: un manejador de wheel o touchstart no pasivo, un elemento con fondo fijo que obliga a repintar al desplazar, una región con contenido que el compositor no puede mover por su cuenta. Cada uno de esos hallazgos es una causa directa de desplazamiento a tirones y suele arreglarse con una línea.

// La causa mas comun que este superpuesto detecta.
elemento.addEventListener("wheel", manejador);                    // bloquea el scroll
elemento.addEventListener("wheel", manejador, { passive: true }); // no lo bloquea

Emular preferencias

La sección de emulación de consultas de medios es lo que convierte el trabajo de accesibilidad de movimiento en algo verificable sin tocar los ajustes del sistema. Puedes forzar:

• prefers-reduced-motion a reduce.
• prefers-color-scheme a claro u oscuro.
• prefers-contrast a más o menos contraste.
• prefers-reduced-transparency a reduce.
• forced-colors a activo.

Con prefers-reduced-motion forzado, recorre las pantallas principales y comprueba que no queda nada a medias: elementos con opacidad intermedia que nunca llegaron a 1, paneles que se quedaron desplazados, contenido de revelado por scroll que jamás se reveló. Es la auditoría del nivel anterior, ejecutada en dos minutos.

Y Emulate vision deficiencies tiene un uso indirecto muy bueno para animación: con la simulación de acromatopsia activada, cualquier cambio de estado que se comunicara solo con color desaparece. Si al activarla no puedes distinguir el estado activo del inactivo, ese estado necesita otra señal, y una de las señales disponibles es el movimiento.