Guia Rápido de Web Workers no JavaScript

Os Web Workers fornecem um meio simples de executar scripts em threads de segundo plano sem bloquear a interface do usuário.

Execução em segundo plano (Threading)

Thread principal do cliente

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

worker.onmessage = function (event) {
  console.log('Recebido do worker:', event.data);
};

worker.postMessage('olá da thread principal!');

As mensagens podem ser de qualquer tipo de dados suportado pelo algoritmo de clonagem estruturada (objetos, arrays, strings, números, blobs, typed arrays).

Thread do Worker

// Dentro de worker.js
self.onmessage = function (event) {
  console.log('Recebido no worker:', event.data);
  self.postMessage({ msg: 'resposta do worker' });
};

Estrutura do MessageEvent

bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             // Carga útil transferida
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: []
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"

Esses campos descrevem as propriedades disponíveis no objeto MessageEvent dentro de onmessage.