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

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

Как работает

function step(time) {
  box.style.transform = `translateX(${(time / 10) % 300}px)`;
  requestAnimationFrame(step);
}
requestAnimationFrame(step);

• Браузер вызывает колбэк один раз за кадр (обычно 60 раз в секунду, на быстрых экранах — чаще).
• Колбэк получает точное время кадра — по нему считают прогресс анимации, а не по счётчику вызовов.
• Во вкладке в фоне вызовы приостанавливаются — экономится батарея.

Почему лучше setTimeout

setTimeout(fn, 16) не привязан к кадрам: изменения могут попасть между отрисовками, вызывая рывки и лишнюю работу.

Где применяют

• JS-анимации, где не хватает CSS;
• объединение частых обновлений (scroll, resize) в одно за кадр;
• измерения DOM перед следующей отрисовкой.

Отменить — cancelAnimationFrame(id).

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

rAF вызывает колбэк перед каждой отрисовкой кадра, синхронизируя анимации с экраном и приостанавливаясь в фоне; это лучше таймеров для анимаций.

Подробнее: MDN — requestAnimationFrame