Чем requestAnimationFrame отличается от setTimeout при реализации анимаций?

Браузер отрисовывает страницу кадрами, обычно синхронизируясь с частотой монитора (60 Гц, 120 Гц и т.д.). Чтобы анимация выглядела плавно, изменения стилей должны происходить ровно перед очередным кадром. requestAnimationFrame (rAF) как раз для этого и создан: браузер сам вызывает переданный колбэк перед следующим перерисовыванием, передавая в него метку времени.

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

• Вызовы группируются в один кадр, что экономит ресурсы.
• В неактивной вкладке или скрытом окне rAF приостанавливается — экономится батарея и CPU.
• Колбэк получает timestamp, что позволяет считать дельту времени и делать анимацию независимой от FPS.

Проблемы setTimeout для анимаций

• Интервал не совпадает с частотой кадров: часть кадров пропускается, часть — дублируется.
• В фоновой вкладке таймеры троттлятся (минимум 1000 мс), но всё равно продолжают выполняться впустую.
• Нет информации о времени кадра, приходится использовать Date.now(), что даёт менее точную дельту.

Пример: движение квадрата

const box = document.getElementById('box');
let start = null;

function step(ts) {
  if (!start) start = ts;
  const progress = (ts - start) / 1000; // секунды
  box.style.transform = `translateX(${progress * 100}px)`;
  if (progress < 3) requestAnimationFrame(step);
}
requestAnimationFrame(step);

// Антипример с setTimeout:
// setInterval(() => { x += 2; box.style.left = x + 'px'; }, 16);
// При 60 Гц это даст рывки и лишние перерисовки.

rAF также удобно использовать для отмены анимации через cancelAnimationFrame(id) и для синхронизации нескольких независимых анимаций в одном кадре.

Итог: для любой визуальной анимации в браузере применяйте requestAnimationFrame — он даёт плавность, экономит ресурсы и корректно работает с частотой экрана. setTimeout уместен только для логики, не связанной с рендерингом.