Що таке web workers?
Web Worker — це механізм у JavaScript, який дозволяє запускати фоновий потік для виконання важких або тривалих операцій без блокування основного інтерфейсу.
З Web Workers ви можете:
- виконувати складні обчислення,
- обробляти великі масиви даних,
- працювати з canvas або WebAssembly,
- і не заморожувати інтерфейс.
Що не може зробити Web Worker?
- Не має доступу до DOM
- Не може отримати доступ до
window,document,alert,localStorage - Може працювати тільки через повідомлення (message passing)
Приклад: Створення Web Worker
worker.js — Скрипт Worker
javascript
// worker.js
self.onmessage = function (e) {
const result = e.data * 2;
postMessage(result); // надіслати відповідь назад
};main.js — Основний Скрипт
javascript
// main.js
const worker = new Worker('worker.js');
worker.onmessage = function (e) {
console.log('Відповідь від worker:', e.data);
};
worker.postMessage(21); // Надіслати дані до workerУ цьому прикладі 21 надсилається до worker, він обробляє і повертає 42.
Переваги Web Workers
- Асинхронність: важкі завдання виконуються без заморожування інтерфейсу
- Продуктивність: може паралелізувати обробку даних
- Обмін повідомленнями: простий API через postMessage
API Web Workers
| Метод/Подія | Призначення |
|---|---|
new Worker(url) | Створення worker |
worker.postMessage() | Надсилання даних до worker |
worker.onmessage | Отримання даних від worker |
worker.terminate() | Примусове зупинення worker |
self.onmessage | Обробка вхідних даних всередині worker |
postMessage() | Надсилання відповіді від worker до основного потоку |
Де застосовувати Web Workers?
- Обробка великих масивів даних
- Генерація графіки, рендеринг
- Стиснення зображень
- Криптографія
- Парсинг великих JSON/CSV
- Машинне навчання в браузері (через WebAssembly + Worker)
Недоліки та обмеження
- Налагодження складніше, ніж у звичайному JS
- Немає доступу до DOM/Window
- Працює через CORS, краще запускати з сервера
Зміст
Що не може зробити Web Worker?Приклад: Створення Web Workerworker.js — Скрипт Workermain.js — Основний СкриптПереваги Web WorkersAPI Web WorkersДе застосовувати Web Workers?Недоліки та обмеження
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.