Web Workers

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. 

__

__

Nossa especialidade é construir aplicações com excelência e que realmente contribuam para o desenvolvimento e crescimento dos nossos clientes. 

É hora da sua equipe de tecnologia partir para o próximo nível e nós podemos ajudar.

Quer saber mais sobre como a nata.house pode contribuir para o crescimento do seu negócio? Fale com um dos nossos especialistas! 

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *