Caso você já tenha executado tarefas que demandam maior poder de processamento em uma página web, pode ter percebido que ocorrem travamentos e lentidão na interface que afetam negativamente a experiência do usuário.
Um dos motivos que faz isso acontecer é a execução de tarefas que gastam muito tempo para serem executadas e que, por ventura, possuem uma parte que não pode ser executada de forma assíncrona.
Uma forma de evitar esses problemas é a utilização de um Web Worker.
Quer saber melhor sobre o assunto? Então continue a leitura e confira o conteúdo que o Ítalo Lelis, Desenvolvedor aqui na nata.house, preparou pro nosso Blog.
O que é Web Worker?
De acordo com a documentação da MDN, um Web Worker é uma ferramenta, presente nas versões mais atuais dos navegadores, que permite a criação de novas threads (workers) para a execução de código isolada da thread principal.
Isso significa que é possível, criando um novo Web Worker a partir da sua aplicação web, rodar funcionalidades em paralelo às rotinas principais.
O que é uma thread?
Uma thread é um contexto de execução de código que roda de forma independente (com suas variáveis locais e agendamento próprio no processador).
Por conta disso, em um caso que duas threads independentes executam tarefas complexas, elas poderão rodar de forma concorrente (sem que uma trave a execução da outra).
No caso do Javascript, uma thread não possui variáveis compartilhadas com outras threads e somente consegue se comunicar através de eventos.
Quando utilizar um Web Worker?
A utilização de Web Workers é ideal em tarefas que não precisam manipular o DOM, já que o worker não possui acesso ao DOM ou o elemento window da thread principal.
Alguns exemplos:
- Processamento de dados grandes, como um arquivo GeoJSON de vários MB para exibir informações em um mapa
- Execução de cálculos matemáticos e tarefas que rodam em plano de fundo.
Apesar de ser possível utilizar um Web Worker em múltiplos contextos, é muito importante analisar a necessidade dessa ferramenta para o objetivo do projeto e se o esforço para a implementação de um worker condiz com a complexidade da tarefa.
Como funciona?
Por rodar em um contexto separado da thread principal, um worker não consegue acessar diretamente variáveis presentes na rotina principal.
Por isso, a comunicação entre a thread principal e o worker acontece através de eventos que são responsáveis por enviar mensagens contendo informações entre as threads.
Abaixo, um diagrama que apresenta um exemplo de utilização do Web Worker:
Como visto no diagrama acima, a API do Web Worker permite que sejam enviadas múltiplas mensagens de entrada e saída, cada uma executando seu próprio callback.
Por isso, é responsabilidade do desenvolvedor compreender a forma de utilização do worker que atende à necessidade do projeto.
Como criar um Web Worker?
Para criar um novo Web Worker, você precisa criar um novo arquivo Javascript contendo o código a ser executado e iniciá-lo no código principal (main.js). Neste exemplo, vamos criar um arquivo chamado worker.js.
Com o objetivo de enviar e ler as mensagens entre as threads, é necessário enviar uma mensagem utilizando o comando postMessage e criar um callback associado à variável onmessage.
Exemplo de código para o rotina principal e o worker:
main.js
const worker = new Worker('worker.js');
worker.onmessage = function(evento) {
const mensagem = evento.data;
console.log(mensagem);
}
worker.postMessage('Oi da thread principal');
worker.js
onmessage = function(evento) {
const mensagem = evento.data;
const novaMensagem = mensagem.replace('principal', 'secundária');
postMessage(novaMensagem);
postMessage(`${novaMensagem} novamente`);
Ao executar o código, o console vai apresentar o seguinte resultado:
Ponto de atenção
Apesar de, no exemplo, ter sido criado somente um worker, é possível utilizar múltiplos Web Workers em um mesmo projeto, cada um com a sua funcionalidade, thread e contexto.
Isso pode ser interessante em casos que exista tarefas diferentes a serem executadas.
Mas atenção! É importante ficar atento que a criação de novas threads não significa, necessariamente, que ocorrerá um aumento de performance do código. Isso ocorre porque criar várias threads não significa que todas irão rodar em paralelo: a engine do Javascript só irá permitir que um número n de threads rodem em paralelo.
Após isso, as outras threads entrarão em estado de espera e somente serão executadas após a finalização das threads anteriores.
Tendo isso em mente, é possível perceber que o objetivo principal ao utilizar um Web Worker é desafogar a thread principal para evitar travamentos na interface, ao invés de aumentar o desempenho do código.
