Web Workers em JavaScript: Executando Tarefas em Segundo Plano sem Travar a Interface

A Main Thread (thread principal) é responsável por executar JavaScript, atualizar o DOM, processar eventos, renderizar a interface e responder aos cliques do usuário — tudo ao mesmo tempo, numa única fila.

Imagine esta função:

function calculoPesado() {  const inicio = Date.now();   while (Date.now() - inicio < 5000) {    // trabalho pesado  }} calculoPesado();

Durante cinco segundos:

• A página congela
• Botões param de responder
• Animações travam
• O scroll deixa de funcionar

O usuário tem a sensação de que o site quebrou. Esse é o custo de executar trabalho CPU-intensivo na mesma thread que cuida da interface.

Imagine uma cozinha com apenas um cozinheiro. Ele precisa atender clientes, preparar pratos, limpar utensílios e organizar pedidos. Se chegar um prato extremamente demorado, todo o restaurante para.

Agora imagine contratar um auxiliar. Enquanto o cozinheiro principal continua atendendo os clientes, o auxiliar faz o trabalho pesado nos bastidores.

┌─────────────────────────────────────────────────────────────┐│  RESTAURANTE = NAVEGADOR                                    ││                                                             ││  Cozinheiro principal (Main Thread)                         ││    → atende clientes, atualiza cardápio, interface fluida   ││                                                             ││  Auxiliar (Worker)                                          ││    → prepara pratos demorados em paralelo                   │└─────────────────────────────────────────────────────────────┘

Essa é exatamente a ideia dos Web Workers: delegar processamento pesado para uma thread separada enquanto a Main Thread mantém a experiência do usuário.

Um Web Worker é um arquivo JavaScript executado em uma thread separada. Ele possui:

• Seu próprio event loop
• Sua própria memória
• Seu próprio contexto global (self)

E executa em paralelo com a thread principal — em hardware com múltiplos núcleos, isso pode significar uso real de CPU em paralelo.

Main Thread                    Worker Thread     │                               │     │  postMessage(dados)           │     ├──────────────────────────────►│     │                               │  processamento pesado     │  onmessage(resultado)         │     │◄──────────────────────────────┤     │                               │  Atualiza DOM                  Calcula

Importante: JavaScript continua sendo single-threaded em cada thread. Workers não tornam o JS multi-threaded dentro de uma mesma thread — eles criam threads adicionais no navegador.

Workers são ideais para tarefas intensivas em CPU — trabalho que manteria a Main Thread ocupada por muito tempo:

✅ Processamento de imagens (redimensionar, aplicar filtros) ✅ Cálculos matemáticos complexos ✅ Filtros e ordenação em listas muito grandes ✅ Análise de arquivos (CSV, logs) ✅ Geração de PDFs ✅ Compressão/descompressão de dados ✅ Manipulação de frames de vídeo

Quando NÃO usar

Para tarefas que já são naturalmente assíncronas e não bloqueiam a thread principal:

• fetch() e requisições HTTP
• setTimeout / setInterval
• WebSocket
• Leitura de APIs do navegador (IndexedDB, etc.)

Essas operações delegam o trabalho às Web APIs do navegador — o padrão que você viu no event loop. Workers são para quando o próprio JavaScript precisa fazer muito cálculo.

Muitas pessoas confundem:

await fetch('/api/users');

com paralelismo. Mas await apenas libera a thread enquanto espera uma resposta de rede. Tudo continua acontecendo na mesma thread — o event loop cuida de outras tarefas enquanto a rede responde.

Web Workers são diferentes:

Async/await (fetch)          Web Workers─────────────────────         ─────────────────────Uma thread                    Main Thread + Worker ThreadEspera I/O                    Calcula em paraleloNão bloqueia rede             Não bloqueia interface

Regra simples: Async é para esperar. Workers são para calcular.

Arquivo principal (Main Thread)

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

O arquivo worker.js será executado em outra thread. O caminho é relativo à página que criou o Worker.

Forma moderna: Module Workers

// Permite import/export dentro do Workerconst worker = new Worker('./worker.js', {  type: 'module',});

Com type: "module", você pode usar import e export dentro do Worker — útil para compartilhar utilitários sem poluir o escopo global.

Como as threads possuem memórias separadas, elas não compartilham variáveis. A comunicação acontece exclusivamente via mensagens.

Main Thread → Worker

// main.jsconst worker = new Worker('./worker.js');worker.postMessage('Olá Worker!');

// worker.jsself.onmessage = (event) => {  console.log(event.data); // "Olá Worker!"};

Worker → Main Thread

// worker.jsself.onmessage = (event) => {  const nome = event.data;  self.postMessage(`Olá ${nome}`);};

// main.jsworker.onmessage = (event) => {  console.log(event.data); // "Olá Vander"}; worker.postMessage('Vander');

Structured Clone: postMessage copia os dados usando o algoritmo Structured Clone — objetos simples, arrays, ArrayBuffer, Map, Set funcionam. Funções e referências DOM não podem ser transferidas.

main.js:

const worker = new Worker('./worker.js'); worker.onmessage = (event) => {  console.log('Resultado:', event.data);}; worker.postMessage(1_000_000_000);

worker.js:

self.onmessage = (event) => {  let soma = 0;   for (let i = 0; i < event.data; i++) {    soma += i;  }   self.postMessage(soma);};

Enquanto o cálculo acontece na thread do Worker:

• A interface continua fluida
• Botões continuam funcionando
• Animações continuam sendo renderizadas

Compare com executar o mesmo loop na Main Thread — a página congelaria por vários segundos.

Na thread principal temos window. Dentro de um Worker usamos self:

// worker.jsself.postMessage('Finalizado'); // self === this dentro de um Worker dedicadoconsole.log(self === this); // true

Workers dedicados expõem um subconjunto limitado de APIs do navegador — suficiente para cálculos, fetch (sim, Workers podem fazer fetch!), timers e importScripts, mas sem acesso ao DOM.

Este é um dos pontos mais importantes — e uma fonte comum de confusão.

Dentro de um Worker, isto gera erro:

document.getElementById('titulo'); // ❌ ReferenceError

Também não existem:

window      // ❌document    // ❌localStorage  // ❌alert()       // ❌

Isso acontece porque o DOM não é thread-safe — permitir acesso concorrente causaria condições de corrida imprevisíveis.

Então quem altera a interface?

O Worker apenas calcula. A Main Thread continua responsável pelo DOM:

// worker.jsself.postMessage(resultado); // main.jsworker.onmessage = (event) => {  resultadoElement.textContent = event.data;};

Usuário clica      ↓Main Thread      ↓postMessage(dados)      ↓Worker Thread      ↓Processamento pesado      ↓postMessage(resultado)      ↓Main Thread      ↓Atualiza DOM

Esse padrão — delegar → processar → retornar → renderizar — é a arquitetura padrão para qualquer feature que use Workers: processamento de imagem, parser de CSV, compressor de arquivos, etc.

Workers continuam vivos enquanto existirem — consumindo memória e CPU. Quando não forem mais necessários, encerre explicitamente:

worker.terminate();

Isso libera recursos do navegador imediatamente. O Worker também pode encerrar a si mesmo:

// worker.jsself.close();

Boas práticas: Crie Workers sob demanda, reutilize quando fizer sentido (pool de Workers), e sempre terminate() quando a tarefa terminar ou o componente for desmontado.

Imagine um escritório. O gerente atende clientes o tempo inteiro (Main Thread). Mas existe uma equipe interna responsável por tarefas demoradas (Workers).

Clientes    ↓Gerente (Main Thread) — sempre disponível    ↓Equipe interna (Workers) — trabalho pesado    ↓Resultados enviados de volta    ↓Gerente apresenta ao cliente (atualiza DOM)

O gerente nunca para de atender porque a equipe trabalha em paralelo. É exatamente isso que acontece no navegador quando você usa Web Workers corretamente.

Com DOM, Fetch API e Web Workers, você completou a trilha Web Platform. O próximo passo na jornada 33 Conceitos JS é a trilha Object-Oriented JS — começando por Factories & Classes: como criar objetos de forma eficiente com funções fábrica e classes ES6.

→ Factories & Classes — criar objetos em JavaScript

Fonte de referência: 33jsconcepts.com/concepts/web-workers ⬀