Execução em Segundo Plano com Web Workers em JavaScript

No desenvolvimento web, a natureza monofilamento do JavaScript pode limitar o desempenho em tarefas intensivas de cálculo. Web Workers surgem como uma solução essencial para processar operações pesadas em segundo pleno, mantendo a interface do usuário responsiva.

O que é um Web Worker

Web Workers é uma tecnologia introduzida pelo HTML5 que possibilita a execução de scripts em threads separados do thread principal do navegador. Isso permite que operações demoradas ocorram paralelamente, sem bloquear a interface gráfica.

Características dos Web Workers

Thread independente: rodam em um contexto isolado, separados do thread principal.
Acesso restrito ao DOM: não é possível manipular elementos da página diretamente.
Comunicação via mensagens: a troca de dados entre o worker e o script principal é feita com métodos como postMessage e onmessage.
Ideal para tarefas computacionalmente pesadas: como processamento de grandes volumes de dados ou cálculos complexos.

Exemplo Prático de Utilização

A seguir, demonstramos como empregar um Web Worker para calcular a média de uma grande lista de números, mantendo a página interativa durante o processamento.

Estrutura do Projeto

O exemplo inclui um arquivo HTML para a interface, um script principal para controle, e um script do worker para a lógica de cálculo.

Arquivo index.html

<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Web Worker</title>
</head>
<body>
    <h1>Web Worker: Cálculo de Média</h1>
    <button id="iniciar">Iniciar Cálculo</button>
    <p id="resultado"></p>

    <script src="app.js"></script>
</body>
</html>

Arquivo app.js

// Seleciona elementos do DOM
const botaoIniciar = document.getElementById('iniciar');
const campoResultado = document.getElementById('resultado');

// Instancia o Web Worker
const workerProcesso = new Worker('calculo.js');

// Escuta respostas do worker
workerProcesso.onmessage = function (evento) {
    const media = evento.data;
    campoResultado.textContent = `A média calculada é: ${media}`;
};

// Trata erros do worker
workerProcesso.onerror = function (erro) {
    console.error('Falha no worker:', erro.message);
    campoResultado.textContent = 'Erro durante o cálculo. Tente novamente.';
};

// Ao clicar no botão, envia dados para o worker
botaoIniciar.addEventListener('click', () => {
    // Gera uma lista com 10 milhões de números aleatórios
    const dadosNumericos = Array.from({ length: 10000000 }, () => Math.random() * 1000);

    // Envia os dados para o worker
    workerProcesso.postMessage(dadosNumericos);

    // Atualiza a interface
    campoResultado.textContent = 'Processando... Aguarde.';
});

Arquivo calculo.js

// Recebe mensagens do script principal
self.onmessage = function (evento) {
    const valores = evento.data; // Obtém os dados enviados

    // Calcula a média dos valores
    const total = valores.reduce((acumulador, item) => acumulador + item, 0);
    const mediaCalculada = total / valores.length;

    // Envia o resultado de volta
    self.postMessage(mediaCalculada);
};

Conceitos Chave

Criação do worker: new Worker('arquivo.js') inicializa uma instância.
Escuta de mensagens: utilize worker.onmessage para capturar respostas.
Tratamento de erros: implemente worker.onerror para falhas no worker.
Envio de dados: chame worker.postMessage(dados) para transmitir informações.
Encerramento: finalize com worker.terminate() quando não for mais necessário.
Dentro do worker: use self.onmessage para receber dados e self.postMessage para responder.

Tags: javascript webworkers html5 Multithreading performance

Publicado em 7-11 17:05

Doido Dev