JavaScript Worker.postMessage() — передати дані у фоновий потік

Метод postMessage() передає дані фоновому потоку — і назад.

правити

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

Дані копіюються, а не поділяються. Це не поверхнева копія: структура клонується цілком, включно з вкладеними об'єктами, Map, Set і датами.

Але клонувати можна не все. Функції, DOM-елементи й класи з методами не передаються — спроба кидає DataCloneError. Передавати можна лише дані, не поведінку.

І головне про продуктивність: копіювання коштує часу. Передати 100 МБ означає їх скопіювати — а це може з'їсти весь виграш від фонового потоку.

Рятує другий аргумент — список передачі. ArrayBuffer можна не копіювати, а передати: він миттєво «переїжджає» в робітника, а у відправника стає порожнім.

правити

Порада

Ганяєш великі двійкові дані — передавай буфер другим аргументом: worker.postMessage(buffer, [buffer]). Це миттєво, бо копіювання не відбувається взагалі.

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

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

// копіюється — структура клонується цілком
worker.postMessage({ items: [1, 2, 3], when: new Date() });

// а це кине DataCloneError
// worker.postMessage({ fn: () => {} });
// worker.postMessage({ node: document.body });

// великі дані — ПЕРЕДАЄМО, не копіюємо
const buffer = new ArrayBuffer(100 * 1024 * 1024);

worker.postMessage(buffer, [buffer]); // миттєво

console.log(buffer.byteLength); // 0 — буфер «переїхав»