RequestIdleCallback

requestIdleCallback() - это метод веб-API, который позволяет разработчикам ставить в очередь функцию для выполнения в периоды простоя основного цикла событий браузера. Это идеальный инструмент для выполнения низкоприоритетных фоновых задач, которые не должны влиять на критически важные операции, такие как анимация или обработка ввода пользователя.

В интернет-маркетинге, где крайне важна производительность сайта, понимание requestIdleCallback помогает понять, как браузер расставляет приоритеты и как можно отложить некритичный код (например, сбор аналитики или предзагрузку ресурсов) на потом.

Назначение и важность параметра timeout

Браузер постоянно занят: он обрабатывает клики, выполняет JavaScript, перерисовывает страницу. requestIdleCallback даёт возможность выполнить работу, когда у браузера есть свободное время.

Важно: использование параметра timeout настоятельно рекомендуется. Если его не указать, а браузер будет постоянно занят обработкой более приоритетных задач, callback-функция может никогда не вызваться или её выполнение отложится на неопределённо долгий срок.

Синтаксис

requestIdleCallback(callback)
requestIdleCallback(callback, options)

• callback: Функция, которая будет вызвана в период простоя. Ей передаётся объект IdleDeadline, который содержит два полезных элемента:
  • didTimeout: Булево значение, указывающее, истёк ли таймаут, заданный в options.
  • timeRemaining(): Функция, возвращающая количество миллисекунд, которое осталось до завершения текущего периода простоя. Это позволяет callback'у решить, сколько работы он может выполнить, не задерживая следующий кадр.
• options (необязательный):
  • timeout: Максимальное количество миллисекунд, которое браузер может ждать перед вызовом callback'а. Если это время истечёт, задача будет выполнена в следующем цикле событий, даже если это повлияет на производительность.

Пример использования

function myBackgroundTask(deadline) {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    doWorkIfNeeded(tasks.pop());
  }
  if (tasks.length > 0) {
    requestIdleCallback(myBackgroundTask);
  }
}

requestIdleCallback(myBackgroundTask, { timeout: 2000 });

В этом примере функция myBackgroundTask будет выполнять задачи из списка tasks до тех пор, пока у браузера есть свободное время (deadline.timeRemaining() > 0). Если список не опустеет, она снова запланирует себя. Параметр timeout: 2000 гарантирует, что даже при постоянной занятости браузера эта работа начнётся не позднее, чем через 2 секунды.

requestIdleCallback vs setTimeout

В отличие от setTimeout, который выполняет код в указанное время, не обращая внимания на загруженность браузера, requestIdleCallback:

• Запускает код только в периоды простоя.
• Не мешает анимациям и обработке ввода.
• Позволяет контролировать объём работы через timeRemaining().

setTimeout с нулевой задержкой всё равно создаёт задачу, которая будет выполнена в следующем цикле событий, но она может прервать важные операции.

Применение в маркетинге и веб-разработке

Задача	Применение
Сбор аналитики	Отправка данных о поведении пользователя на сервер может быть отложена до периода простоя
Предзагрузка ресурсов	Загрузка изображений или скриптов, которые могут понадобиться позже, но не критичны для текущего отображения
Обработка больших данных	Фильтрация или сортировка массивов данных на стороне клиента в фоне
Сохранение состояния	Автоматическое сохранение черновиков или состояния приложения, когда пользователь делает паузу

requestIdleCallback в React

React 18+ использует requestIdleCallback в своей архитектуре параллельного рендеринга (Concurrent Rendering). Это позволяет React прерывать рендеринг, если браузеру нужно обработать более приоритетные события, делая интерфейсы более отзывчивыми.

Полифиллы и поддержка браузеров

Поддержка requestIdleCallback не является столь же повсеместной, как у requestAnimationFrame. Он может не работать в некоторых браузерах, особенно в старых версиях Safari. Для обеспечения кросс-браузерности можно использовать полифилл, который эмулирует поведение через setTimeout с понижением приоритета.

Ошибки при использовании

• Отсутствие проверки поддержки. Перед использованием нужно убедиться, что функция существует, иначе код упадёт с ошибкой.
• Игнорирование параметра timeout. Как уже говорилось, без timeout callback может никогда не выполниться.
• Слишком долгая работа. Функция должна укладываться в отведённое timeRemaining() время, иначе это вызовет задержки в следующем кадре.
• Изменение DOM в idle-задачах. Внесение изменений в DOM может вызвать перерасчёт стилей и перерисовку, что лучше делать в более подходящее время.

Связанные термины

• requestAnimationFrame
• Event Loop
• Веб-аналитика
• Lazy Loading