Какие есть способы устранить фризы, если необходимая долгая задача блокирует основной поток?

Главный поток браузера выполняет JavaScript, обрабатывает события, пересчитывает стили и рисует кадры. Если в нём запустить долгую синхронную операцию, event loop не может переключиться на другие задачи, и интерфейс замирает. Чтобы этого избежать, работу нужно либо вынести из главного потока, либо разбить на короткие порции, между которыми браузер успевает отрисовать кадр.

Основные подходы

• Web Worker — отдельный поток для тяжёлых вычислений, обмен через postMessage.
• Разбиение на чанки — обработка данных порциями через setTimeout, setInterval или requestIdleCallback.
• Асинхронные API — fetch, промисы, async/await не блокируют поток во время ожидания.
• requestAnimationFrame — для задач, связанных с анимацией, чтобы синхронизироваться с отрисовкой.
• Оптимизация алгоритма — уменьшение сложности, ленивые вычисления, кэширование.

Пример: разбиение задачи на чанки

function processInChunks(items, chunkSize, onDone) {
  let index = 0;
  function next() {
    const end = Math.min(index + chunkSize, items.length);
    for (; index < end; index++) {
      heavyWork(items[index]);
    }
    if (index < items.length) {
      setTimeout(next, 0); // отдаём поток браузеру
    } else {
      onDone();
    }
  }
  next();
}

Пример: Web Worker

// main.js
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => console.log('result', e.data);

// worker.js
self.onmessage = (e) => {
  const result = heavyCompute(e.data);
  self.postMessage(result);
};

Web Worker подходит для CPU-интенсивных задач: парсинг больших файлов, шифрование, обработка изображений. Чанки и requestIdleCallback удобны, когда работу нельзя вынести в отдельный поток, но можно прерывать. Асинхронные API обязательны для любых сетевых и I/O операций.

Итог: выбирайте Web Worker для тяжёлых вычислений, чанки и idle-колбэки для инкрементальной обработки, а асинхронные API — для операций ожидания. Это сохраняет отзывчивость интерфейса и предотвращает фризы.