Что такое Web Worker?

Что такое Web Worker?

Web Worker — это API браузера, который позволяет запускать JavaScript код в отдельном потоке (не в главном потоке браузера). Это дает возможность выполнять тяжелые вычисления БЕЗ блокировки UI и поддержания интерактивности страницы.

Главная проблема, которую решает Web Worker

JavaScript в браузере работает в одном потоке. Если выполнять тяжелую операцию, страница "зависает" — UI не реагирует на клики, анимации тормозят:

// ❌ Плохо — зависает UI на 5 секунд
function heavyCalculation() {
  for (let i = 0; i < 1000000000; i++) {
    // Какой-то расчет
  }
}

button.addEventListener("click", () => {
  heavyCalculation();  // Страница зависает!
  console.log("Готово");
});

Во время выполнения heavyCalculation() кнопки не кликаются, инпуты не печатают, анимации стопут.

Решение: Web Worker

Web Worker выполняет задачу в отдельном потоке, оставляя главный поток свободным:

// ✅ Хорошо — UI остается отзывчивым
const worker = new Worker("worker.js");

button.addEventListener("click", () => {
  worker.postMessage({ type: "calculate" });  // Отправляем задачу
});

// Слушаем результат
worker.onmessage = (event) => {
  console.log("Результат:", event.data);
  // Страница остается отзывчивой!
};

Содержимое worker.js

// worker.js — отдельный файл для рабочего потока

self.onmessage = (event) => {
  if (event.data.type === "calculate") {
    let result = 0;
    
    // Тяжелые вычисления в отдельном потоке
    for (let i = 0; i < 1000000000; i++) {
      result += Math.sqrt(i);
    }
    
    // Отправляем результат обратно в главный поток
    self.postMessage({ result: result });
  }
};

Как работает коммуникация

Главный поток отправляет данные постMessage() в Web Worker, Worker получает через onmessage, обрабатывает и отправляет результат обратно. Это асинхронная коммуникация через сообщения.

Пример: обработка больших файлов

// Главный поток
const worker = new Worker("imageProcessor.js");

input.addEventListener("change", (event) => {
  const file = event.target.files[0];
  
  // Отправляем файл в worker
  worker.postMessage({ file: file });
  
  console.log("Начало обработки...");
  // UI остается отзывчивым!
});

worker.onmessage = (event) => {
  const processedImage = event.data;
  displayImage(processedImage);
  console.log("Готово!");
};

// imageProcessor.js (Worker)
self.onmessage = async (event) => {
  const file = event.data.file;
  
  // Тяжелая обработка изображения
  const imageData = await processImage(file);
  
  // Отправляем результат
  self.postMessage(imageData);
};

async function processImage(file) {
  // Фильтры, ресайз, компрессия и т.д.
  return processedData;
}

Ограничения Web Worker

Что НЕЛЬЗЯ делать в Worker:

• Обращаться к DOM (нет document, window, parent)
• Использовать alert()
• Обращаться к определенным видам локального хранилища
• Изменять родительское окно

Что МОЖНО:

• setTimeout, setInterval
• Fetch API (AJAX запросы)
• WebSockets
• Тяжелые вычисления
• Парсинг больших JSON файлов

Типы Worker'ов

1. Dedicated Worker — используется одной страницей

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

2. Shared Worker — может использоваться несколькими вкладками

const sharedWorker = new SharedWorker("shared.js");
sharedWorker.port.start();

3. Service Worker — для кэширования, push-уведомлений, оффлайн-режима (отдельная тема)

Пример: распараллеливание работы

// Запускаем несколько worker'ов одновременно
const workers = [
  new Worker("worker.js"),
  new Worker("worker.js"),
  new Worker("worker.js")
];

const chunks = splitDataIntoChunks(largeData, 3);

workers.forEach((worker, index) => {
  worker.postMessage(chunks[index]);
});

let completed = 0;
workers.forEach((worker) => {
  worker.onmessage = () => {
    completed++;
    if (completed === workers.length) {
      console.log("Все worker'ы завершили работу!");
    }
  };
});

Когда использовать Web Worker?

✅ Нужен Worker:

• Обработка больших данных
• Сложные математические вычисления
• Кодирование/декодирование (видео, изображения)
• Парсинг XML/JSON
• Обработка текста

❌ Не нужен Worker:

• Простые операции (менее 10ms)
• Частые обновления UI
• Небольшие данные

Веб-воркеры — мощный инструмент для оптимизации производительности при работе с тяжелыми вычислениями!