> Какие инструменты позволяют убрать нагрузку с основного потока в JavaScript (JavaScript)

Короткий ответ

Основные инструменты: Web Workers (Dedicated, Shared, Service Workers), requestIdleCallback, setTimeout с нулевой задержкой, queueMicrotask, а также OffscreenCanvas и AudioWorklet для специфических задач. Web Workers - единственный способ выполнять код в параллельном потоке. Остальные инструменты перераспределяют задачи внутри основного потока, не создавая новый поток.

Подробное объяснение

Основной поток в браузере отвечает за рендеринг, обработку событий и выполнение JavaScript. Долгие синхронные операции блокируют UI. Инструменты делятся на две категории:

Истинная многопоточность:

• Web Workers - запускают код в отдельном потоке с собственным event loop. Не имеют доступа к DOM, но могут обмениваться данными через postMessage. Shared Workers разделяются между вкладками, Service Workers работают как прокси между браузером и сетью.
• OffscreenCanvas - переносит отрисовку canvas в worker.
• AudioWorklet - обработка звука в отдельном потоке.

Асинхронное перераспределение в основном потоке:

• setTimeout(fn, 0) - откладывает выполнение до следующего event loop tick, позволяя браузеру отрендерить изменения.
• queueMicrotask - выполняет колбэк после текущей задачи, но до рендеринга. Используется для микрозадач (например, обновление состояния).
• requestIdleCallback - выполняет код в свободное время браузера, когда основной поток простаивает. Подходит для некритичных задач (аналитика, предзагрузка).
• requestAnimationFrame - синхронизирует выполнение с циклом рендеринга, но не убирает нагрузку - скорее оптимизирует анимации.

На практике

Для тяжелых вычислений (парсинг данных, обработка изображений, криптография) используйте Web Workers. Для разбивки больших синхронных задач на части - setTimeout с рекурсией или requestIdleCallback. Для срочных обновлений состояния - queueMicrotask.

Типичный сценарий: у вас есть массив из 10 000 элементов, который нужно отфильтровать и отсортировать. В основном потоке это заблокирует UI на 100-300 мс. Выносим в worker - пользователь продолжает взаимодействовать со страницей.

Важно: передача данных в worker требует сериализации (structured clone), что может быть дорого для больших объектов. Используйте Transferable objects (ArrayBuffer, ImageBitmap) для zero-copy передачи.

Пример кода

JAVASCRIPT
// main.js
const worker = new Worker('worker.js');

worker.postMessage({ data: largeArray });

worker.onmessage = (event) => {
  console.log('Результат:', event.data);
};

// worker.js
self.onmessage = (event) => {
  const { data } = event;
  const result = data.filter(item => item.active).sort((a, b) => a.value - b.value);
  self.postMessage(result);
};

Как отвечать на собеседовании

Начните с Web Workers как основного инструмента, затем перечислите асинхронные методы. Упомяните trade-off: worker требует передачи данных, а setTimeout не создает новый поток, но может фрагментировать выполнение. Приведите пример из практики - когда вы выносили тяжелую операцию в worker и как решали проблему с передачей данных.

Что проверяет интервьюер

• Понимание event loop и разницы между микро- и макрозадачами.
• Знание ограничений Web Workers (нет DOM, сериализация).
• Умение выбирать инструмент под задачу: worker для CPU-bound, requestIdleCallback для low-priority, setTimeout для разбивки.
• Осведомленность о современных API (OffscreenCanvas, AudioWorklet).

Типичные ошибки

• Полагаться на setTimeout(fn, 0) как на полноценную многопоточность - он не убирает нагрузку, а только откладывает.
• Передавать в worker большие объекты без Transferable - это копирование, а не перемещение.
• Использовать requestIdleCallback для срочных задач - он может не выполниться вовремя.
• Забывать завершать worker (worker.terminate()), что приводит к утечкам памяти.