Що робить Web Worker?

JavaScriptMiddle~2 хв читання

Що таке Web Worker

Web Worker - це окремий фоновий потік JavaScript, який виконується паралельно з основним (UI) потоком.

Він не має доступу до DOM, але може:

виконувати важкі обчислення (наприклад, парсинг, шифрування, сортування великих масивів),
обмінюватися повідомленнями з головним потоком через postMessage,
працювати незалежно від інтерфейсу, не "заморожуючи" сайт.

Як це працює

Уяви браузер:

Main thread - відповідає за DOM, події, відмальовування, інтерфейс.
Worker thread - фоновий потік, що виконує JS-код.

Вони спілкуються між собою через повідомлення (message passing), як два окремих процеси.

Приклад використання

1. Файл worker.js

javascript

// Цей код виконується в окремому потоці
self.onmessage = (event) => {
  const n = event.data;
  let sum = 0;
  for (let i = 0; i < n; i++) {
    sum += i;
  }
  // Надсилаємо результат назад в основний потік
  self.postMessage(sum);
};

2. В основному файлі (наприклад, main.js)

javascript

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

// Надсилаємо завдання
worker.postMessage(1e8);

// Отримуємо результат
worker.onmessage = (event) => {
  console.log('Результат:', event.data);
};

// Можна слухати помилки
worker.onerror = (err) => {
  console.error('Помилка у воркері:', err);
};

Тепер обчислення суми від 0 до 100 млн виконується у фоні, і інтерфейс лишається плавним і чуйним.

Обмін даними

Передавання відбувається через серіалізацію (structured clone).
Великі дані можна передавати без копіювання за допомогою Transferable objects:

javascript
const buffer = new ArrayBuffer(1024); worker.postMessage(buffer, [buffer]); // Передаємо володіння

Після передавання buffer стає недоступним в основному потоці (переданий за посиланням).

Обмеження

Немає доступу до:
- document, window, alert, localStorage
- безпосередньо до DOM (можна лише передавати дані)
Доступно:
- fetch, setTimeout, Promise, WebSocket, IndexedDB
- імпорт інших скриптів через importScripts()

Види воркерів

Тип	Опис
Dedicated Worker	Працює лише з одним основним потоком (найчастіший випадок)
Shared Worker	Може використовуватися кількома сторінками або вкладками одного домену
Service Worker	Проксі між застосунком і мережею: кеш, офлайн-режим, пуш-сповіщення

Коли використовувати Web Worker

Підходить:

Обробка великих даних (JSON, CSV, зображень, матриць)
Генерація мініатюр, кодування зображень
Криптографія, хешування (SHA-256, PBKDF2)
Складні алгоритми (пошук шляху, сортування, симуляції)
AI-інференс, ML-моделі в браузері

Не потрібен:

Для простих запитів чи легких обчислень
Коли важливий доступ до DOM

Сучасні покращення

Comlink - бібліотека, що спрощує роботу з воркерами:

javascript
import { wrap } from 'comlink'; const worker = new Worker('worker.js'); const api = wrap(worker); // Можна просто викликати методи як async-функції await api.calculateSomething(123);
У ES Modules можна створювати воркери з type: 'module':

javascript
const worker = new Worker('./worker.js', { type: 'module' });

Підсумок

Що робить	Як допомагає
Запускає JS-код в окремому потоці	Не блокує основний Event Loop
Обмінюється повідомленнями з головним потоком	Можна паралелити роботу
Не має доступу до DOM	Безпечний та ізольований
Використовується для важких обчислень	Покращує чуйність і FPS

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.