Web Worker: uma maneira de executar scripts em segundo plano em um thread diferente do thread principal (janela) atual.

1. Web workers versus assíncronos usando event_loop
2. Introdução aos trabalhadores da Web
3. como criar um web trabalhador
4. Por exemplo, com um web trabalhador
5. limitação de Web Workers
6. operação assíncrona em Web Workers

1. Web Workers versus operações assíncronas usando Event Loop

JavaScript normalmente lida com operações assíncronas colocando tarefas em filas correspondentes (fila de macrotarefas, fila de microtarefas), com o loop de eventos verificando continuamente essas filas e empurrando tarefas para a pilha de chamadas quando estiverem prontas para serem executadas. Essa abordagem garante uma execução sem bloqueio, mas ainda executa tudo em um único thread.

Web Workers, por outro lado, permitem que scripts sejam executados em um thread completamente separado com sua própria pilha de chamadas, filas assíncronas e loop de eventos. Essa separação evita que o thread principal seja bloqueado por cálculos pesados ​​ou tarefas de longa execução, pois o trabalhador opera de forma independente.

2. Introdução aos trabalhadores da Web

Web workers executam scripts em um contexto diferente do contexto da janela principal, permitindo paralelismo em aplicações web. A Web Worker API fornece vários tipos de trabalhadores:

• Trabalhadores Dedicados: Utilizados por um único script, são ideais para descarregar tarefas do thread principal.
• Trabalhadores compartilhados: acessíveis por vários scripts executados em diferentes contextos (por exemplo, diferentes janelas ou iframes).
• Service Workers: Operam como um servidor proxy entre aplicativos da web, o navegador e a rede, fornecendo funcionalidades como suporte offline e cache.

Este artigo se concentra em trabalhadores dedicados, que são os mais simples de implementar e comumente usados.

3. Como criar um trabalhador da Web

Para criar um web trabalhador, você pode usar os seguintes métodos principais:

• new Worker(): O construtor para criar um novo trabalhador.
• postMessage(): Envia mensagens do thread principal para o trabalhador ou vice-versa.
• onmessage: Uma função de retorno de chamada definida para lidar com mensagens recebidas pelo trabalhador.
• terminate(): Interrompe o trabalhador imediatamente.

4. Exemplo simples

Vamos criar um trabalhador para buscar dados de uma API, especificamente imagens de cães da API Dog CEO.

4.1 Código do Trabalhador

Aqui está a implementação do script de trabalho. Observe que dentro do trabalhador, self é usado para se referir ao contexto global:

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

Neste código, o trabalhador escuta mensagens (onmessage) e busca dados do URL fornecido várias vezes, conforme especificado pela contagem.

Esta é a aparência da pilha de chamadas dentro do trabalhador:

4.2 Código do Cliente

O thread principal usa o trabalhador assim:

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

Este código demonstra como enviar uma mensagem ao trabalhador e receber os dados buscados no thread principal.

para código completo vá para código

5. Limitações dos trabalhadores da Web

Embora os web workers sejam executados em um thread separado do thread da janela principal, eles vêm com certas limitações:

• Sem acesso ao DOM: os trabalhadores não podem manipular diretamente o DOM. A comunicação com o thread principal é necessária para atualizar a IU.
• Consumo de recursos: O uso excessivo de web workers pode levar ao alto uso de memória, pois cada trabalhador requer recursos adicionais para operar de forma independente.