Как работает Request Animation Frame

requestAnimationFrame (rAF) — это метод, который позволяет выполнять анимации и другие частые обновления UI эффективно, синхронизируясь с частотой обновления экрана (обычно 60 FPS).

Как работает:

1. Браузер вызывает переданную функцию перед следующей перерисовкой экрана.
2. Оптимизирует производительность, останавливая анимацию в неактивных вкладках.
3. Возвращает ID, который можно использовать для отмены через cancelAnimationFrame.

Пример:

function animate() {
  element.style.left = (parseInt(element.style.left) + 1) + 'px';
  requestAnimationFrame(animate); // Рекурсивный вызов
}
requestAnimationFrame(animate);

Плюсы:

• Экономит ресурсы (не работает в фоне).
• Плавная анимация без setInterval/setTimeout.
• Автоматическая синхронизация с FPS.