Краткий справочник

Шпаргалка по Web Workers в JavaScript

Краткое справочное руководство по HTML5 Web Workers: создание воркера, обмен сообщениями через postMessage, события сообщений и алгоритм структурированного клонирования.

· Опубликовано

Web Workers предоставляют простой способ выполнения скриптов в фоновых потоках без блокировки пользовательского интерфейса.

Фоновая многопоточность

Основной поток клиента

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

worker.onmessage = function (event) {
  console.log('Получено от воркера:', event.data);
};

worker.postMessage('привет из основного потока!');

Сообщения могут быть любого типа данных, поддерживаемого алгоритмом структурированного клонирования (объекты, массивы, строки, числа, blob-объекты, типизированные массивы).

Поток воркера

// Внутри worker.js
self.onmessage = function (event) {
  console.log('Получено в воркере:', event.data);
  self.postMessage({ msg: 'ответ от воркера' });
};

Структура MessageEvent

bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             // Переданные полезные данные
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: []
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"

Эти поля описывают свойства, доступные в объекте MessageEvent обработчика onmessage.

Связанные темы