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 — прапорець, якщо тайм-аут спрацював.

Важливо:

requestIdleCallback не підтримується у всіх браузерах (наприклад, Safari), тому розгляньте можливість використання полифіла або запасного варіанту setTimeout.

Коли використовувати

requestAnimationFrame — для створення анімацій, індикаторів прогресу, слайдерів, canvas.
requestIdleCallback — для непріоритетних завдань: завантаження вторинних скриптів, аналітика, синхронізація з бекендом.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

requestAnimationFrame та requestIdleCallback в JavaScript