Когда выполняется Request Animation Frame

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

Ключевые моменты:

• Вызывается браузером перед repaint.
• Отменяет лишние вызовы, если вкладка неактивна.
• Возвращает ID для отмены через cancelAnimationFrame.

Пример:

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

let pos = 0;
requestAnimationFrame(animate);