Web Workers

Definição

Web Workers são scripts JavaScript executados em threads separadas da thread principal do navegador,
permitindo que tarefas pesadas sejam processadas sem bloquear a interface do usuário.

Eles são úteis para operações de CPU intensiva, como cálculos, parsing de dados ou manipulação de arquivos, que poderiam deixar a interface lenta ou travada se fossem feitas diretamente na thread principal.

Objetivos dos Web Workers

Manter a interface responsiva enquanto tarefas pesadas são executadas.
Realizar processamento paralelo em JavaScript (que por padrão é single-thread).
Separar responsabilidades entre interface e lógica pesada.
Evitar bloqueios causados por cálculos demorados ou laços muito longos.

Exemplo prático

worker.js (script do worker)

// worker.js
self.onmessage = function (evento) {
  const numero = evento.data;
  const resultado = numero * 2;
  self.postMessage(resultado);
};

index.js (script principal)

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

worker.onmessage = function (evento) {
  console.log("Resultado do worker:", evento.data);
};

worker.postMessage(21); // Envia dado para o worker

Saída esperada

Resultado do worker: 42

A thread principal envia dados usando postMessage.
O worker processa o dado e envia o resultado de volta.
Nenhum bloqueio ocorre na interface durante o processamento.

O ciclo de comunicação com Web Workers

[Thread principal] --postMessage()--> [Worker]
         ↑                            ↓
    onmessage() <--- postMessage() --- [Worker]

Considerações importantes

Web Workers não têm acesso ao DOM (documento da página).
Eles rodam em arquivos separados, não podem ser definidos inline.
A comunicação entre a thread principal e o worker é feita por mensagens (sem memória compartilhada).

ℹ️ Info: Web Workers são ideais para tarefas demoradas que exigem muita CPU,
mas que não precisam interagir diretamente com o DOM (como manipular elementos na tela).

Onde são usados

Processamento de imagens ou áudio
Parsing de grandes arquivos (ex: JSON, CSV)
Compressão/descompressão
Algoritmos intensivos (como IA ou criptografia no front-end)