Что такое requestAnimationFrame?

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

Зачем нужен

Для плавных анимаций коллбэк должен выполняться синхронно с кадрами (обычно 60 FPS ≈ каждые 16.7 мс). setTimeout/setInterval этого не гарантируют и дают дёрганую анимацию.

function animate(time) {
  box.style.transform = `translateX(${time / 10}px)`;
  requestAnimationFrame(animate); // следующий кадр
}
requestAnimationFrame(animate);

Преимущества перед setInterval

• Синхронизация с кадрами — плавность.
• Пауза в фоне — не выполняется в неактивной вкладке (экономит батарею/CPU).
• Браузер сам подстраивает частоту под дисплей (в т. ч. 120 Гц).

Отмена

const id = requestAnimationFrame(animate);
cancelAnimationFrame(id);

Аргумент коллбэка

В коллбэк передаётся DOMHighResTimeStamp — точное время, по которому считают прогресс анимации независимо от частоты кадров.

Коротко для собеседования

requestAnimationFrame вызывает коллбэк перед следующей перерисовкой (~60 FPS), давая плавные анимации, синхронные с кадрами, и паузу в фоновых вкладках. Лучше setInterval для анимаций; отменяется cancelAnimationFrame.