ibelick/fixing-motion-performance

¿Qué hace fixing-motion-performance?

Audita y corrige problemas de rendimiento en animaciones, incluidos el thrashing de layout, propiedades del compositor, animaciones vinculadas al scroll y efectos de desenfoque. Úsalo cuando las animaciones se entrecorten, las transiciones sean bruscas o al revisar el rendimiento de animaciones CSS/JS.

Problemas comunes

1. Thrashing de layout

Ocurre cuando JavaScript fuerza múltiples recálculos de layout antes de que el navegador pueda pintar. Esto sucede al leer y escribir propiedades de layout en rápida sucesión.

Mal ejemplo:

const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
  const width = box.offsetWidth; // lectura
  box.style.width = (width + 10) + 'px'; // escritura
  const height = box.offsetHeight; // lectura (forza otro layout)
  box.style.height = (height + 10) + 'px'; // escritura
});

Buen ejemplo:

const boxes = document.querySelectorAll('.box');
// Agrupar todas las lecturas
const sizes = Array.from(boxes).map(box => ({
  width: box.offsetWidth,
  height: box.offsetHeight
}));
// Luego todas las escrituras
boxes.forEach((box, i) => {
  box.style.width = (sizes[i].width + 10) + 'px';
  box.style.height = (sizes[i].height + 10) + 'px';
});

2. Propiedades no compositables

Las animaciones basadas en el compositor solo deben usar transform y opacity. Animaciones de otras propiedades (como top, left, width, height) fuerzan pintado y layout.

Mal ejemplo:

.box {
  transition: left 0.3s ease;
}

Buen ejemplo:

.box {
  transition: transform 0.3s ease;
}

3. Animaciones vinculadas al scroll

Los listeners de scroll pueden causar jank si realizan trabajo pesado. Usa requestAnimationFrame y desacopla la lógica.

Mal ejemplo:

window.addEventListener('scroll', () => {
  document.querySelector('.parallax').style.transform = `translateY(${window.scrollY * 0.5}px)`;
});

Buen ejemplo:

let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      document.querySelector('.parallax').style.transform = `translateY(${window.scrollY * 0.5}px)`;
      ticking = false;
    });
    ticking = true;
  }
});

4. Efectos de desenfoque pesados

Filtros como blur() pueden ser costosos. Úsalos con moderación y sobre elementos pequeños.

Mal ejemplo:

.hero {
  filter: blur(10px);
  transition: filter 0.5s;
}

Buen ejemplo:

.hero {
  transition: filter 0.5s;
}
.hero:hover {
  filter: blur(2px); /* usar valores pequeños */
}

Herramientas de auditoría

• DevTools Performance Tab: Graba y analiza frames para identificar jank, largas tareas y composiciones fallidas.
• requestAnimationFrame: Para suavizar animaciones JavaScript.
• CSS will-change: Usar con precaución, solo en elementos que realmente cambiarán.

Mejores prácticas

1. Prefiere transform y opacity para animaciones.
2. Agrupa lecturas y escrituras del DOM para evitar thrashing de layout.
3. Desacopla eventos de scroll con requestAnimationFrame.
4. Mantén los efectos de desenfoque ligeros y sobre áreas pequeñas.
5. Usa herramientas de perfilado para encontrar cuellos de botella reales.