Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🔧 Как правильно использовать requestIdleCallback для второстепенных задач

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

Почему важно:

📍 Делает сайт отзывчивее

📍 Переносит «тяжёлые» задачи на потом

📍 Улучшает производительность без ущерба для UX

Как использовать:

1. Запускаем задачу, когда браузер «свободен»:

requestIdleCallback(() => {
  // Эта операция не помешает UI
  localStorage.setItem('draft', JSON.stringify(formData));
});

2. Полифил для браузеров без поддержки (например, Safari, Firefox):

const ric = window.requestIdleCallback || function (cb) {
  return setTimeout(() => cb({ timeRemaining: () => 0 }), 1);
};

3. Пример: предзагрузка данных во время простоя

requestIdleCallback(() => {
  fetch('/api/hints')
    .then(res => res.json())
    .then(storeHints);
});

4. Используем timeRemaining() для контроля:

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

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

— Метрики и логирование

— Предзагрузка и кеширование

— Фоновая запись в IndexedDB

— Подсказки, превью и прочий «сервисный» UI

⚠️ requestIdleCallback не поддерживается в Safari и Firefox. Для кроссбраузерности используйте полифил, как показано выше.

🐸 Библиотека фронтендера

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8❤2👏1

www.tg-me.com/us/Библиотека фронтендера | Frontend JS JavaScript React js Angular js Vue js/com.frontendproglib/6352

1.18K viewsJul 9 at 07:00

🔧 Как правильно использовать requestIdleCallback для второстепенных задач

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

Почему важно:

📍 Делает сайт отзывчивее

📍 Переносит «тяжёлые» задачи на потом

📍 Улучшает производительность без ущерба для UX

Как использовать:

1. Запускаем задачу, когда браузер «свободен»:

requestIdleCallback(() => {
  // Эта операция не помешает UI
  localStorage.setItem('draft', JSON.stringify(formData));
});

const ric = window.requestIdleCallback || function (cb) {
  return setTimeout(() => cb({ timeRemaining: () => 0 }), 1);
};

requestIdleCallback(() => {
  fetch('/api/hints')
    .then(res => res.json())
    .then(storeHints);
});

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