CodeForge

Maquetación Web Dinámica / Accesibilidad y rendimiento

Animaciones que no destruyen el rendimiento

Teoría20 min20 XP

Dos animaciones idénticas a la vista pueden costar cosas MUY distintas: una vuela a 60fps en cualquier celular, la otra traba el navegador. Ya conociste la regla de oro en el módulo 11 (animar transform y opacity); aquí la consolidas desde el ángulo del rendimiento y aprendes a DIAGNOSTICAR el problema con DevTools — la diferencia entre sospechar y saber.

Las tres estaciones, otra vez

Barato vs caro, lado a lado

En tu computador las dos se ven suaves — el hardware moderno perdona mucho—. Pero la de arriba paga layout por fotograma, y esa cuenta se dispara en móviles modestos, con muchos elementos, o combinada con otro trabajo. La regla no cambia: anima transform y opacity; traduce todo lo demás (mover con translate no con left, escalar con scale no con width).

Diagnosticar: dejar de adivinar

DevTools convierte "creo que va lento" en datos:

devtools.txt
PESTAÑA RENDERING (Menú ⋮ → More tools → Rendering):
• Paint flashing → parpadea en verde lo que se REPINTA. Anima box-shadow
  y verás lluvia verde; anima transform y... silencio.
• Frame Rendering Stats → un medidor de FPS en vivo mientras interactúas.

PESTAÑA PERFORMANCE:
• Graba unos segundos de la animación (botón ● Record).
• Busca los fotogramas ROJOS o las barras largas: son los que pasan de
  16,6ms (el presupuesto de 60fps) y el usuario siente como tirón.
• Si ves "Layout" o "Recalculate Style" repetido en cada fotograma de tu
  animación → estás animando una propiedad cara. Ahí está la prueba.

Ese 16,6ms es la aritmética de los 60fps (1000 ÷ 60): TODO el trabajo de un fotograma debe caber ahí. transform/opacity dejan casi todo el presupuesto libre; width/left se lo comen.

will-change: con criterio

Grabas tu animación en la pestaña Performance de DevTools y ves 'Layout' y 'Recalculate Style' repetidos en casi cada fotograma, con varios fotogramas rojos (>16ms). ¿Qué te dice eso?

Mini-reto

Toma una animación de "El Observador" que use left, top, margin o width (o crea una) y diagnostícala: activa Paint flashing y grábala en Performance para VER el layout dispararse. Luego tradúcela a transform y vuelve a grabar: los fotogramas rojos y los "Layout" deberían desaparecer. Ver el antes y el después en la línea de tiempo de DevTools convierte la regla de oro de "algo que memoricé" en "algo que comprobé".

Qué sigue

Tienes las dos mitades de la calidad: accesibilidad y rendimiento, con las herramientas para medir ambas. El reto del módulo las une en el ejercicio más realista posible: recibir una página lenta e inaccesible, auditarla, y arreglarla — documentando el antes y el después con Lighthouse. El trabajo de un profesional de verdad.