Как requestAnimationFrame связан с Event Loop?

Чтобы понять связь requestAnimationFrame (rAF) с Event Loop, нужно сначала вспомнить, что Event Loop — это механизм, который непрерывно обрабатывает задачи из разных очередей. Основные фазы Event Loop включают выполнение макротасков (например, setTimeout), микротасков (например, промисы) и задач, связанных с рендерингом.

Место rAF в цикле событий

Колбэк, переданный в requestAnimationFrame, не попадает в общую очередь макротасков. Вместо этого браузер помещает его в специальную очередь анимационных кадров. Эта очередь обрабатывается на этапе "обновления рендера" (Update the rendering) внутри Event Loop. Этот этап происходит только тогда, когда браузер готовится к перерисовке экрана, обычно синхронизированной с частотой обновления монитора (например, 60 Гц).

Порядок выполнения

Типичный цикл для кадра с анимацией выглядит так:

1. Выполняются все микротаски (например, обработчики промисов).
2. Выполняется один макротаск (например, колбэк setTimeout).
3. Наступает фаза обновления рендера. Здесь, если пришло время для отрисовки кадра:
   • Выполняются все колбэки, запланированные через requestAnimationFrame.
   • Происходят вычисления стилей, компоновка (layout) и отрисовка (paint).

Практический пример

Рассмотрим код, который анимирует движение элемента. Использование rAF гарантирует, что обновление позиции произойдет непосредственно перед отрисовкой браузером, что минимизирует "дрожание" (jank).

const element = document.getElementById('box');
let position = 0;

function animate() {
  // Обновляем позицию элемента
  position += 2;
  element.style.transform = `translateX(${position}px)`;

  // Запрашиваем следующий кадр анимации
  if (position < 200) {
    requestAnimationFrame(animate);
  }
}

// Запускаем анимацию
requestAnimationFrame(animate);

В этом примере функция animate будет вызываться браузером в оптимальное время для анимации. Если бы мы использовали setInterval, вызовы могли бы происходить в неподходящие моменты (например, когда браузер занят другими задачами), что привело бы к пропуску кадров или неравномерной анимации.

Где это применяется

requestAnimationFrame — стандартный способ создания плавных анимаций в веб-приложениях. Он используется в библиотеках анимации, игровых движках на Canvas или WebGL, а также для выполнения "тяжелых" вычислений, которые можно разбить на кадры, чтобы не блокировать основной поток надолго.

Вывод: Используйте requestAnimationFrame, когда вам нужна плавная, производительная анимация или визуальное обновление, синхронизированное с частотой обновления экрана. Это позволяет браузеру интегрировать ваш код в собственный цикл рендеринга, избегая лишних вычислений и обеспечивая лучший пользовательский опыт.