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

Question

Чтобы тяжелые вычисления не блокировали интерфейс, их можно:Вынести в Web Worker – выполнять код в фоновом потоке.Разбить на части (chunking) с помощью setTimeout или requestIdleCallback.Использовать WASM (WebAssembly) для высокопроизводительных вычислений.Оптимизировать алгоритмы – например, заменить вложенные циклы на более эффективные методы.

YeaHub · Accepted Answer

Браузер использует один основной поток для JS и рендера, поэтому долгие вычисления (сортировка больших массивов, сложная математика) могут "заморозить" интерфейс. Решения:Web WorkersПозволяют запускать код в отдельном потоке. Пример:// main.js const worker = new Worker('worker.js'); worker.postMessage(1000000); // Отправляем данные worker.onmessage = (e) => console.log(e.data); // Получаем результат // worker.js onmessage = (e) => { let sum = 0; for (let i = 0; i < e.data; i++) sum += i; postMessage(sum); // Отправляем обратно }; Плюсы: Не блокирует UI.Минусы: Нельзя напрямую работать с DOM.Разбиение на части (Chunking)Если Workers недоступны, можно разбить задачу на мелкие части:function processChunk(start, end) { for (let i = start; i < end; i++) { /* ... */ } if (end < 1e6) { setTimeout(() => processChunk(end, end + 1000), 0); } } processChunk(0, 1000); Плюсы: Простота.Минусы: Медленнее Workers.WebAssembly (WASM)Для крайне тяжелых вычислений (например, 3D-графика, криптография):// Пример с использованием WASM-модуля WebAssembly.instantiateStreaming(fetch('module.wasm')) .then((obj) => obj.instance.exports.heavyCalculation()); Плюсы: Скорость близка к нативному коду.Минусы: Сложность настройки.