Como criar um thread de Web Worker em JavaScript?

Para criar um Web Worker em JavaScript, utiliza-se o construtor Worker, que aceita o caminho para o script que é executado numa thread separada.

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

O script do worker (worker.js) é executado num outro contexto global, que não tem acesso ao DOM nem ao objeto global window. Para trocar dados entre o script principal e o worker, usam-se os métodos postMessage() e o manipulador de eventos onmessage.

No script principal:

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

// Enviar dados ao worker
worker.postMessage({ data: 'Olá do thread principal!' });

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

// Processar erros do worker (opcional)
worker.onerror = function(error) {
  console.error('Erro no worker:', error);
};

// Terminar o worker
// worker.terminate();

No script do worker (worker.js):

// Processar mensagens do thread principal
self.onmessage = function(event) {
  console.log('Recebido no worker:', event.data);

  // Realizar uma operação prolongada (exemplo!)
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Enviar o resultado de volta ao thread principal
  self.postMessage({ result: result, originalData: event.data });
};

// Processar erros dentro do worker (opcional)
self.onerror = function(error) {
  console.error('Erro no worker:', error);
};

// O worker pode importar outros scripts
// importScripts('utils.js', 'helper.js');

Os Web Workers permitem deslocar cálculos intensivos para um thread separado, evitando bloquear o thread principal da interface de utilizador e melhorando a reatividade da aplicação. Deve-se ter em conta as limitações: os workers não têm acesso direto ao DOM, window, document, localStorage nem sessionStorage. A troca de dados ocorre através da cópia de valores ou usando objetos Transferable para melhorar o desempenho ao transferir grandes volumes de dados.