Как создать поток Web Worker в JavaScript?

Для создания Web Worker в JavaScript используется конструктор Worker, который принимает путь к скрипту, выполняющемуся в отдельном потоке.

const worker = new Worker('path/to/worker.js');

Скрипт воркера (worker.js) выполнятся в другом глобальном контексте, не имеющем доступа к DOM или глобальному объекту window. Для обмена данными между основным скриптом и воркером используются методы postMessage() и обработчик события onmessage.

В основном скрипте:

const worker = new Worker('worker.js');

// Отправка данных воркеру
worker.postMessage({ data: 'Привет из основного потока!' });

// Обработка сообщений от воркера
worker.onmessage = function(event) {
  console.log('Получено от воркера:', event.data);
};

// Обработка ошибок воркера (необязательно)
worker.onerror = function(error) {
  console.error('Ошибка в воркере:', error);
};

// Завершение выполнения воркера
// worker.terminate();

В скрипте воркера (worker.js):

// Обработка сообщений от основного потока
self.onmessage = function(event) {
  console.log('Получено в воркере:', event.data);

  // Выполнение длительной операции (пример!)
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Отправка результата обратно основному потоку
  self.postMessage({ result: result, originalData: event.data });
};

// Обработка ошибок внутри воркера (необязательно)
self.onerror = function(error) {
  console.error('Ошибка внутри воркера:', error);
};

// Воркер может импортировать другие скрипты
// importScripts('utils.js', 'helper.js');

Web Workers позволяют выносить ресурсоемкие вычисления в отдельный поток, предотвращая блокировку основного потока UI и улучшая отзывчивость приложения. Следует учитывать ограничения: воркеры не имеют прямого доступа к DOM, window, document, localStorage и sessionStorage. Обмен данными происходит путем копирования значений или с использованием Transferable объектов для повышения производительности при передаче больших объемов данных.