O que são web workers e para que servem?

Os web workers são uma forma de executar scripts em threads de fundo, separados do thread principal da interface de utilizador.

O seu objetivo principal:

• Melhorar o desempenho: Transferir tarefas que consomem muitos recursos (cálculos complexos, processamento de grandes volumes de dados, análise) do thread principal, responsável por renderizar a interface e gerir eventos do utilizador. Isto evita que a página congele e melhora a capacidade de resposta da aplicação.
• Paralelismo: Permite executar várias tarefas simultaneamente, aproveitando de forma mais eficiente os processadores multinúcleo.

Existem três tipos de web workers:

1. Dedicated Workers: Associados a uma página específica e acessíveis apenas a ela.
2. Shared Workers: Podem ser acessíveis a partir de várias páginas ou abas do mesmo domínio.
3. Service Workers: Funcionam como proxies de rede, interceptando pedidos de rede e permitindo implementar funcionalidades offline, notificações push e outras capacidades de aplicações web progressivas (PWA).

Princípios de funcionamento:

• Contexto separado: O worker tem o seu próprio objeto global e acesso a um subconjunto da API do navegador (sem acesso ao DOM, window, document, parent).
• Troca de mensagens: A interação entre o thread principal e o worker ocorre através de mensagens usando postMessage() e o manipulador de eventos onmessage. Os dados são transmitidos por valor (copiados) ou por referência (Objetos Transferíveis).

Exemplo de uso de um Worker dedicado:

// main.js (thread principal)
const worker = new Worker('worker.js'); // Criação do worker

worker.onmessage = (event) => {
  // Processamento da mensagem do worker
  console.log('Recebido do worker:', event.data);
};

worker.postMessage('Iniciar operação complexa'); // Envio de mensagem ao worker

// worker.js (arquivo do worker)
onmessage = (event) => {
  // Processamento da mensagem do thread principal
  console.log('Recebido do thread principal:', event.data);

  // Execução de tarefa complexa
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Envio do resultado de volta
  postMessage(result);
};