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

Браузер использует один основной поток для 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());  

  Плюсы: Скорость близка к нативному коду.
  Минусы: Сложность настройки.