JavaScript Worker — обчислення у фоновому потоці

Worker (у перекладі — робітник) виконує JavaScript у окремому потоці, не блокуючи сторінку.

правити

Загальний опис

JavaScript у браузері однопотоковий: важкий цикл заморожує геть усе — анімації стають, кнопки не натискаються, сторінка «не відповідає».

Робітник виносить обчислення вбік. Це окремий файл зі своїм скриптом, який живе паралельно й спілкується з головним потоком повідомленнями: postMessage() туди, onmessage назад.

Ціна — ізоляція. У робітника немає доступу до DOM, до document і до window: він не може ані прочитати сторінку, ані щось на ній намалювати. Його справа — рахувати й віддати результат.

Дані між потоками копіюються, а не поділяються. Тобто передати гігантський масив теж не безкоштовно (хоч для ArrayBuffer є передача без копіювання).

правити

Порада

Ознака, що потрібен робітник: інтерфейс підвисає на секунду й більше. Розбір великого JSON, обробка зображення, шифрування — типові кандидати.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

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

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	2	3.5	4	10.6	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	5

Підтримка: серверні переглядачі

Переглядач
	11.7.0*	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<button id="run">Порахувати</button>
<p id="out">Інтерфейс лишається живим</p>

// --- worker.js (окремий файл) ---
// self.onmessage = event => {
//     let sum = 0;
//     for (let i = 0; i < event.data; i++) sum += i;
//     self.postMessage(sum);
// };

// --- головний потік ---
const worker = new Worker('/worker.js');

document.getElementById('run').addEventListener('click', () => {
    // сторінка не завмре: рахує інший потік
    worker.postMessage(1e9);
});

worker.onmessage = event => {
    document.getElementById('out').textContent = 'Сума: ' + event.data;
};

worker.onerror = error => console.error(error.message);

// коли більше не потрібен
// worker.terminate();