К чему привязан рендер requestAnimationFrame

requestAnimationFrame привязан к частоте обновления экрана (обычно 60 FPS). Он синхронизирован с браузерным рендер-циклом, что делает его оптимальным для анимаций и визуальных обновлений. В отличие от setTimeout/setInterval, он автоматически паузируется при скрытии вкладки, экономя ресурсы.

Пример:

function animate() {
  // Логика анимации
  element.style.left = `${pos++}px`;
  
  if (pos < 100) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

Ключевые особенности:

• Вызывается перед репаинтом
• Не гарантирует точный интервал между вызовами
• Возвращает высокоточное время (DOMHighResTimeStamp)