Optimización de animaciones web con requestAnimationFrame en JS

Introducción Usar setTimeout o setInterval para animaciones provoca saltos visuales y un alto consumo de CPU. Esto sucede porque estas funciones no están sincronizadas con el refresco de pantalla del monitor (usualmente 60Hz). La solución profesional es requestAnimationFrame, que pausa la ejecución cuando el usuario cambia de pestaña, optimizando recursos y fluidez.

Solución Rápida (Código)

function animar() {
    // Lógica de movimiento
    elemento.style.transform = `translateX(${posicion}px)`;
    posicion += 2;

    if (posicion < 500) {
        requestAnimationFrame(animar);
    }
}

requestAnimationFrame(animar);

Explicación técnica El método requestAnimationFrame (rAF) le indica al navegador que deseas realizar una animación y solicita que programe el repintado en el siguiente ciclo. A diferencia de los timers tradicionales, rAF se ajusta automáticamente a la tasa de refresco del dispositivo (FPS), garantizando que el código se ejecute justo antes de que el navegador dibuje el frame.

Esto elimina el screen tearing y reduce el trabajo innecesario del procesador. Una ventaja crítica para el SEO y la UX es que rAF se detiene automáticamente en pestañas inactivas, lo que ahorra batería en dispositivos móviles y reduce la carga del Main Thread. Al usar rAF, es recomendable manejar el tiempo transcurrido (timestamp) para que la velocidad de la animación sea constante independientemente de la potencia del hardware del usuario.

Conclusión La fluidez visual es un componente esencial de la experiencia de usuario. Si quieres llevar tus interfaces al siguiente nivel, revisa nuestro artículo sobre aceleración por hardware con CSS Transform.