Como criar um thread Web Worker em JavaScript…

Criar um thread Web Worker em JavaScript pode ser feito usando o construtor Worker.

// Criar um novo Web Worker, passando o caminho para o arquivo JS,
// que será executado em um thread separado.
const worker = new Worker('worker.js');

No arquivo worker.js (ou qualquer outro especificado ao criar o worker), o código será executado em um thread separado.

// worker.js

// Processamento de mensagens enviadas do thread principal
self.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Mensagem recebida do thread principal:', receivedData);

  // Enviar mensagem de volta ao thread principal
  const responseData = { message: 'Olá do Worker!', data: receivedData };
  self.postMessage(responseData);
};

// Opcionalmente, pode-se adicionar tratamento de erros
self.onerror = function(error) {
  console.error('Erro no Worker:', error);
};

No thread principal (onde o worker foi criado), pode-se interagir com o worker:

// main.js

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

// Enviar mensagem ao Web Worker
worker.postMessage({ command: 'start', payload: 'some data' });

// Processar mensagens recebidas do Web Worker
worker.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Mensagem recebida do Worker:', receivedData);
};

// Lidar com erros no Web Worker
worker.onerror = function(error) {
  console.error('Erro no Worker no thread principal:', error);
};

// Encerrar o Web Worker (opcional)
// worker.terminate();

Pontos-chave:

Comunicação: A troca de dados entre o thread principal e o worker é feita por mensagens usando os métodos postMessage() e o manipulador onmessage.
Restrições: Os workers não têm acesso ao DOM, ao objeto window, nem a outros objetos globais do navegador. Eles têm acesso limitado aos objetos navigator, location, XMLHttpRequest, setTimeout, setInterval, fetch, WebSockets e outros.
Isolamento: O código no worker é executado em um thread separado, o que previne bloqueios no thread principal e melhora o desempenho, especialmente ao realizar cálculos intensivos em recursos.

Como criar um thread Web Worker em JavaScript?