# Web Workers JavaScript: Guia Completo Passo a Passo

> Web Workers JavaScript são uma API que permite executar scripts em threads paralelas, preservando a fluidez da interface do usuário. A criação de um worker envolve instanciar um objeto Worker com um arquivo de script, e a comunicação entre threads ocorre via postMessage e eventos onmessage. Erros comuns incluem tentar acessar o DOM diretamente no worker, o que é proibido.

*Net Propaganda · Apps e Software · 07 de setembro de 2026 · Walquíria Bensaúde Tomaz*

Web Workers permitem executar scripts em threads separadas, mantendo a interface fluida. Neste guia, você vai criar seu primeiro worker, entender a comunicação com a thread principal e evitar erros comuns.

Se a sua página trava quando você processa um array grande ou gera um relatório, o problema é a thread principal. Ela cuida da interface, e qualquer cálculo longo bloqueia tudo. A solução é o Web Worker, uma thread separada que roda em segundo plano. Neste guia, você vai criar um worker do zero, entender como ele se comunica com a página e ver os erros que todo mundo comete no começo. Você vai precisar de um editor de texto, um navegador moderno e um arquivo HTML básico para testar. Nada de servidor, funciona direto no arquivo local.

## Passo 1: Crie o arquivo do worker

O worker é um arquivo JavaScript separado. Crie um arquivo chamado worker.js. Dentro dele, você vai escutar mensagens vindas da thread principal usando o evento onmessage. Quando uma mensagem chega, você processa os dados e envia o resultado de volta. No nosso exemplo, vamos calcular a soma de um array.

// worker.js self.onmessage = function(e) { const numeros = e.data; const soma = numeros.reduce((acc, atual) => acc + atual, 0); self.postMessage(soma); };

**Erro comum:** esquecer o self antes de onmessage. Sem ele, o worker não escuta nada. Dentro do worker, self representa o escopo global do próprio worker.

## Passo 2: Instancie o worker na página principal

No seu arquivo HTML ou script principal, crie uma nova instância do worker passando o caminho do arquivo.

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

A partir daí, você pode enviar dados para ele com postMessage e receber respostas com onmessage.

meuWorker.postMessage([1, 2, 3, 4, 5]); meuWorker.onmessage = function(e) { console.log('Resultado:', e.data); };

**Dica:** verifique se o arquivo do worker existe no caminho certo. Um erro de digitação no nome ou na pasta faz o navegador lançar uma exceção silenciosa no console.

## Passo 3: Encerre o worker quando terminar

Um worker consome memória enquanto está ativo. Se você não precisa mais dele, chame o método terminate().

meuWorker.terminate();

**Erro comum:** deixar workers abertos em páginas de longa duração. Em uma SPA, isso pode causar vazamento de memória e lentidão gradual. Sempre termine o worker no unload ou quando a tarefa acabar.

## Passo 4: Trate erros dentro do worker

O worker pode falhar. Use o evento onerror no objeto principal para capturar exceções.

meuWorker.onerror = function(e) { console.error('Erro no worker:', e.message); };

**Dica:** dentro do worker, use try...catch para tratar erros de lógica e enviar uma mensagem de erro customizada via postMessage. Assim, você sabe o que aconteceu sem olhar o console.

## Checklist rápido

Você criou um arquivo de worker com onmessage e postMessage. Instanciou o worker na página com new Worker(). Enviou dados, recebeu o resultado e terminou o worker com terminate(). Se você fez tudo isso, já tem um fluxo básico de processamento em segundo plano.

## FAQ

### Web Workers funcionam em todos os navegadores?

Não. Eles são suportados em todos os navegadores modernos, mas o Internet Explorer 9 e versões anteriores não têm suporte. Para aplicações críticas, verifique a compatibilidade com typeof Worker !== 'undefined' antes de usar.

### Posso acessar o DOM dentro de um worker?

Não. O worker não tem acesso ao objeto document. Ele só pode usar APIs como fetch, XMLHttpRequest, IndexedDB e postMessage. Para atualizar a interface, você precisa enviar o resultado de volta para a thread principal.

### Web Workers são iguais a Service Workers?

Não. Service Workers atuam como proxy de rede, interceptando requisições e permitindo funcionalidade offline. Web Workers são para processamento paralelo. Cada um tem um propósito distinto.

### Qual é a diferença entre worker dedicado e compartilhado?

Um worker dedicado é criado por uma única página e só ela usa. Um worker compartilhado pode ser acessado por múltiplas páginas do mesmo domínio. A maioria dos casos usa o dedicado, que é mais simples.

### Como envio objetos complexos para um worker?

Você pode enviar objetos e arrays via postMessage. Eles são serializados com o algoritmo de structured clone. Funções não podem ser enviadas. Se precisar de transferência de grandes buffers, use ArrayBuffer com a opção de transferência.

### O que acontece se eu criar muitos workers?

O navegador limita o número de workers por página. Esse limite varia, mas em geral fica entre 4 e 16. Criar muitos pode degradar a performance. Use um pool de workers para tarefas concorrentes.

Agora você tem o caminho para tirar o peso da thread principal. Teste com um cálculo real, como a soma de um array de um milhão de elementos. A interface vai continuar responsiva. Esse é o ganho prático de usar Web Workers.

---

Fonte (canonical): https://netpropaganda.com.br/apps-e-software/web-workers-javascript-guia-completo-passo-a-passo/