Как можно вынести выполнение скрипта в отдельный поток?

Question

Для выноса выполнения скрипта в отдельный поток можно использовать Web Workers для параллельного выполнения, Service Workers для фоновых задач, или Worker Threads в Node.js. Также можно использовать setTimeout и setImmediate для разбивки тяжелых задач на части, или requestIdleCallback для выполнения во время простоя браузера.

YeaHub · Accepted Answer

Различные API позволяют выполнять код вне основного потока для улучшения производительности.1. Web Workers:Создание worker:// main.js
const worker = new Worker('worker.js');

// Отправка данных в worker
worker.postMessage({ type: 'process', data: largeArray });

// Получение результатов
worker.onmessage = (event) => {
  console.log('Result from worker:', event.data);
};

// Обработка ошибок
worker.onerror = (error) => {
  console.error('Worker error:', error);
};worker.js:// Обработка сообщений из основного потока
self.onmessage = function(event) {
  const { type, data } = event.data;
  
  if (type === 'process') {
    // Тяжелые вычисления
    const result = heavyComputation(data);
    
    // Отправка результата обратно
    self.postMessage(result);
  }
};

// sw.js - кэширование и фоновые задачи
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});3. Worker Threads в Node.js:const { Worker } = require('worker_threads');

// worker.js
const { workerData, parentPort } = require('worker_threads');
parentPort.postMessage(heavyComputation(workerData));4. Разбивка тяжелых задач:Использование setTimeout:function processInChunks(array, chunkSize, callback) {
  let index = 0;

if (tasks.length > 0) {
      requestIdleCallback(processTask);
    }
  }

requestIdleCallback(processTask);
}5. OffscreenCanvas для графики:// Рендеринг canvas в worker
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('canvas-worker.js');

worker.postMessage({ canvas: offscreen }, [offscreen]);

// canvas-worker.js
self.onmessage = function(event) {
  const canvas = event.data.canvas;
  const ctx = canvas.getContext('2d');
  
  // Рендеринг без блокировки основного потока
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};Ограничения Workers:Нет доступа к DOMОграниченный доступ к window APIДанные передаются через сообщения (serialized)Более сложная отладка