requestAnimationFrame и requestIdleCallback в JavaScript

requestAnimationFrame

requestAnimationFrame — это метод браузера, который позволяет выполнить функцию перед следующим перерисовыванием кадра. Используется в основном для создания плавных анимаций и оптимизации рендеринга.

Синтаксис requestAnimationFrame

const id = requestAnimationFrame(callback);

Пример requestAnimationFrame

function animate(time) {
  // обновляем состояние или перемещаем элемент
  box.style.transform = `translateX(${time / 10}px)`;
  requestAnimationFrame(animate); // продолжаем цикл
}

requestAnimationFrame(animate);

Преимущества:

• Синхронизирован с частотой обновления экрана (обычно 60 FPS).
• Браузер может оптимизировать производительность, пропуская кадры, если вкладка не активна.
• Лучше, чем setInterval / setTimeout для анимации.

requestIdleCallback

requestIdleCallback — это метод, который позволяет выполнять задачи, когда браузер "свободен" — в периоды простоя.

Подходит для задач, не критичных к времени выполнения: фоновая аналитика, неважный рендеринг, работа с localStorage и т. д.

Синтаксис requestIdleCallback

const id = requestIdleCallback(callback, { timeout: 1000 });

Пример requestIdleCallback

requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    doTask(tasks.shift());
  }
});

Аргумент deadline

• deadline.timeRemaining() — сколько миллисекунд осталось до перерисовки.
• deadline.didTimeout — флаг, если сработал timeout.

Когда использовать

• requestAnimationFrame — при создании анимаций, прогресс-баров, слайдеров, канваса.
• requestIdleCallback — для неприоритетных задач: загрузка вторичных скриптов, аналитика, синхронизация с бэкендом.