Что произойдет, если убрать requestAnimationFrame из цикла рендеринга?

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

Что происходит без requestAnimationFrame?

Если использовать обычный setInterval или рекурсивный setTimeout для цикла анимации, возникает несколько проблем:

• Отсутствие синхронизации: Таймеры не привязаны к циклу рендеринга браузера. Ваша функция может быть вызвана в середине фазы рендеринга или когда браузер занят другими задачами (например, обработкой событий или парсингом).
• Пропуск кадров (dropped frames): Если функция вызывается слишком часто, браузер может не успевать отрисовывать изменения, что приводит к "дрожанию" (jank).
• Нагрузка на CPU в фоновых вкладках: Таймеры продолжают работать, даже когда вкладка неактивна, тратя заряд батареи и ресурсы процессора.
• Непредсказуемая скорость: На разных устройствах с разной частотой обновления экрана (например, 120 Гц) анимация будет работать с разной скоростью.

Пример кода: сравнение подходов

Вот простой пример анимации движения элемента. Сначала — проблемная версия с setInterval:

// ПЛОХО: использование setInterval
const element = document.getElementById('box');
let pos = 0;
const intervalId = setInterval(() => {
  pos += 5;
  element.style.left = pos + 'px';
  if (pos > 500) clearInterval(intervalId);
}, 16); // ~60 кадров/сек (1000/16)

А теперь правильная версия с requestAnimationFrame:

// ХОРОШО: использование requestAnimationFrame
const element = document.getElementById('box');
let pos = 0;
function animate() {
  pos += 5;
  element.style.left = pos + 'px';
  if (pos < 500) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

Где применяется requestAnimationFrame?

Этот API используется не только для перемещения DOM-элементов. Он критически важен для:

• Canvas-анимаций и игр
• Сложных визуализаций и графиков
• Плавных переходов и параллакс-эффектов
• Собственных библиотек анимации

Браузер автоматически оптимизирует вызовы rAF: приостанавливает их в неактивных вкладках, синхронизирует с VSync и объединяет несколько изменений DOM в одну перерисовку.

Вывод: Всегда используйте requestAnimationFrame для любых визуальных обновлений, которые должны происходить плавно и синхронно с частотой обновления экрана. Это обеспечивает оптимальную производительность, экономию энергии и предотвращает визуальные артефакты. Таймеры (setInterval/setTimeout) подходят только для задач, не связанных с рендерингом.