Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить Web Worker?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке 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 |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати502 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.