Web Trabalhadores com o CLI Angular

Um guia para uma maneira simples de criar Web Workers com o CLI Angular e comparação de desempenho com e sem um Web Worker

TRAN SON HOANG Seg. 17 de jul · 6 min ler Foto de Hoang Tran no Unsplash

Embora os web workers estejam por aí há algum tempo, os engenheiros de front-end parecem evitar usá-los em projetos. Há alguma documentação no site Angular, mas este artigo mostrará como gerar funcionários, testar seu desempenho e mostrar casos reais de uso para eles. Com esse conhecimento, espero que você esteja pronto para começar a integrá-los em seu código existente.

O que vamos fazer neste artigo:

  1. Conhecimento básico do trabalhador da Web
  2. Como criar web workers com o angular-cli a partir do zero
  3. Entenda o desempenho dos trabalhadores da web
  4. Fornecer casos que possam utilizar trabalhadores da Web

Conhecimento básico do trabalhador da Web

Os Web Workers permitem que você execute cálculos intensivos de CPU em um thread de segundo plano, liberando o thread principal para atualizar a interface do usuário.

Como você sabe, quando executamos o script na página HTML, a página não responde até que o script seja concluído. Durante esse tempo, o usuário não pode fazer nada – todos nós sentimos a dor de precisar esperar vários segundos para que uma tarefa complicada seja concluída antes que um aplicativo se torne utilizável.

Web workers colocarão esses cálculos complexos que levam mais de 3 segundos ou 5 segundos no thread de segundo plano e permitem que o usuário continue seu trabalho.

Aqui estão alguns pontos que precisamos prestar atenção ao usar web workers:

  1. Crie um trabalhador pelo new Worker(scriptURL, options) .
  2. Usando postMessage como uma maneira de enviar dados para o trabalhador ou uma maneira de retornar dados do trabalhador e manipulados onde onmessage é chamado.
  3. Usando onmessage para obter o resultado do trabalhador.
  4. Usar encerrar quando você quiser interromper os funcionários da Web e liberar recursos do navegador.

Como criar um trabalhador da web com o angular-cli

Você pode adicionar um trabalhador da web em qualquer lugar em seu aplicativo. Se o arquivo que contém seu cálculo caro for src/app/app.component.ts , você poderá adicionar um Web Worker usando este comando.

A execução deste comando irá:

uma. Configure seu projeto para usar Web Workers, se ainda não estiver.

CRIAR tsconfig.worker.json

ATUALIZAÇÃO tsconfig.app.json

ATUALIZAR angular.json

b. CREATE src / app / app.worker.ts

c. ATUALIZAÇÃO src / app / app.component.ts

A CLI Angular colocará automaticamente essa lógica na parte inferior do arquivo app.component.ts . Então você precisa movê-lo para um componente e refatorá-lo novamente.

Também temos outra sintaxe de CLI para criar web workers:

 ng generate webWorker <nome> [opções] 

Você pode ler mais aqui .

Erros comuns que você pode ver no console

“Espera 2–3 argumentos, mas tem 1” para postMessage : Pelo que entendi atualmente, parece que há duas versões de web workers.

Esperado 2–3 argumentos, mas tem 1

Um do Visual Studio, precisamos fornecer três três parâmetros com dois deles necessários. No entanto, se você olhar para esta documentação , temos apenas dois parâmetros e apenas um é necessário.

Solução: adicione declare function postMessage(message:any): void; na parte superior do arquivo do trabalhador.

“Espera 1 argumentos, mas tem 2” para new Worker

Esperado 1 argumentos, mas tenho 2

O mesmo para este problema. Mas, de acordo com este documento , temos dois argumentos.

Solução: Apenas ignore. O código será executado sem qualquer erro.

Na documentação, eles não mencionam o que é o módulo de tipo. Pelo que entendi, acho que um trabalhador da Web só é colocado no pacote do arquivo quando colocamos o type: 'module' . Se o navegador não puder ver o trabalhador, ele receberá o erro abaixo.

Obter http: // localhost: 4200 / app.worker 404 (não encontrado)

Nota: se você não vir o aviso e ainda assim obtiver um problema não encontrado para o new Worker , isso significa que você terá que executar novamente o servidor novamente.

Último erro é function() could not be cloned . Isso ocorre porque a mensagem a ser enviada para o service worker pode ser qualquer tipo de clonagem estruturada . É uma longa história, mas você pode ler isto para aprender mais.

function () não pôde ser clonada

Solução: não coloque a função dentro da mensagem para resolver esse problema.

Se você encontrar algum problema, você pode comentar abaixo. Eu atualizarei o artigo. Obrigado!

Desempenho com trabalhadores da web

> Encontre o código fonte para este exemplo aqui .

O desempenho é sempre crucial. Vamos ver que tipo de ganhos podemos esperar usando web workers.

Eu compararei entre o JavaScript single-threaded e o uso de um web worker para fazer um cálculo complicado para encontrar números primos de 10.000.000.

Primeiro, olhe para a interface do usuário ao clicar no botão de discussão

Usuário clica no botão Thread do JavaScript

Isso fará com que seu navegador fique por um tempo. Nesta situação, demora 210 segundos. Quero dizer quase 4 minutos que você não pode fazer nada e sentar na frente do computador como um tolo. Observe que o botão permanece pressionado enquanto os cálculos são executados.

Após o cálculo ter terminado e o thread principal ter sido liberado, isso permite ao usuário engajar a interface. Você pode ver o resultado abaixo. Demorou tanto tempo para esse cálculo.

Resultado 210 segundos para calcular

Agora, olhe para a interface do usuário depois de clicar no botão Web Worker

Usuário clica no botão Web Worker

Você pode ver imediatamente a interface do usuário se tornar responsiva logo após o clique, e o resultado para executar esse cálculo é de apenas 1 segundo. O cálculo será executado em segundo plano e a resposta é enviada para a interface depois de encontrar o resultado.

Resultado após concluir o cálculo

O que isto significa? O tempo de script ao usar um Web Worker é muito menor do que o normal que geralmente fazemos.

Casos de uso para trabalhadores da web

Depois que entendermos os benefícios dos web workers e como implementá-los, a próxima coisa a fazer é encontrar casos reais em que eles possam se inscrever. Aqui estão alguns exemplos que acho que os web workers seriam benéficos:

  1. Aplicativos da Web progressivos
  2. Cálculo em lista ou matriz grande
  3. Buscando ou armazenando dados em cache
  4. Destaque de sintaxe ou formatação de texto em tempo real
  5. Verificação ortográfica
  6. Atualizar dados extensivos em um banco de dados da Web local
  7. Comprimir ou descomprimir um arquivo
  8. Filtragem de imagens

Você pode comentar abaixo para outros casos que usam Web Workers.

Resumo

Usando o Web Workers não é difícil. Essa pode ser uma solução importante para executar tarefas complicadas que consomem recursos excessivos do navegador.

Espero que você tenha achado este artigo útil! Você pode me seguir no Medium . Eu também estou no Twitter . Sinta-se livre para deixar qualquer dúvida nos comentários abaixo. Eu ficarei feliz em ajudar!

Você pode verificar o código fonte aqui .

Recursos / Referências

[1]: Trabalhadores da Web nas Escolas W3 https://www.w3schools.com/html/html5_webworkers.asp

[2]: Usando Web Workers https://developer.mozilla.org/pt-BR/docs/Web/API/Web_Workers_API/Using_web_workers

[3]: Usando Web Workers com Angular CLI https://angular.io/guide/web-worker

[4]: Computação com Web Workers JavaScript https://johnresig.com/blog/web-workers/

[5]: Como funciona o JavaScript: Os blocos de construção de Web Workers + 5 casos quando você deve usá-los https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers- 5 casos – quando você deve usá-los – a547c0757f6a