Em JavaScript, existem várias abordagens para aprimorar a interface geral do usuário do site. O “Trabalhador da Web” é uma abordagem que permite que o thread principal continue em execução sem ser bloqueado. Ele compreende sua instância separada do mecanismo JavaScript e, portanto, não pode invocar as funcionalidades do thread principal.
Este artigo discutirá como utilizar “Trabalhador da Web” para multithreading em JavaScript.
O que são trabalhadores da Web?
“Trabalhadores da Web” corresponde a uma API do navegador que permite ao JavaScript executar as tarefas em paralelo/ao mesmo tempo em um thread separado/dedicado.
Qual é a necessidade de trabalhadores da Web?
Como o JavaScript é de thread único, portanto, os códigos JavaScript complexos bloqueiam o thread da UI, ou seja, interrompem a janela principal que lida com todas as tarefas de atualização, implementação de eventos de entrada do usuário, etc. . Para lidar com esta questão, o “Trabalhador da Web” entra em vigor e resolve o bloqueio do thread da UI.
Como usar Web Workers para multithreading com JavaScript?
Fazer um “Trabalhador da Web” , utilize o construtor Worker. É tal que leva como argumento uma URL, que corresponde ao caminho do arquivo de script do trabalhador que implementa a funcionalidade desejada. No entanto, para incluir o código de trabalho em um arquivo HTML, utilize um “bolha” para escrever código de trabalho.
Sintaxe (criando um Web Worker)
const x = novo Trabalhador ( 'trabalhador.js' ) ;Sintaxe (enviando uma mensagem ao trabalhador)
const x = novo Trabalhador ( 'trabalhador.js' ) ;
Sintaxe (recebendo uma mensagem do trabalhador)
x. na mensagem = função ( evento ) {console. registro ( evento. dados ) ;
} ;
Exemplo: Utilização de “Web Worker” para calcular o fatorial de um número em JavaScript
O exemplo a seguir usa o 'Trabalhador()' construtor para criar um web trabalhador e calcular o fatorial de um número:
< HTML >
< cabeça >
< estilo h2 = 'alinhamento de texto: centro;' > Exemplo de trabalhadores da Web h2 >
cabeça >
< corpo >
< roteiro >
const x = novo Trabalhador ( URL. criarObjectURL ( novo bolha ( [
`
//Script de trabalho
const facto = ( n ) => {
se ( n == 0 || n == 1 ) {
retornar 1n ;
}
outro {
retornar BigInt ( n ) * facto ( BigInt ( n ) - 1n ) ;
}
} ;
auto. na mensagem = ( evento ) => {
const Com = facto ( evento. dados ) ;
auto. postar mensagem ( Com. para sequenciar ( ) ) ;
} ; `
] , { tipo : 'texto/javascript' } ) ) ) ;
x. postar mensagem ( 15h ) ;
x. na mensagem = ( evento ) => {
const fora = evento. dados ;
console. registro ( 'Fator de 15 por meio de um Web Worker->' , fora ) ;
} ;
corpo >
HTML >
Neste código, aplique as seguintes etapas:
- Em primeiro lugar, especifique o título declarado.
- Depois disso, crie um “Trabalhador da Web” objeto que possui a URL do objeto Blob que compreende o código do trabalhador.
- O código dedicado ao trabalhador está incluído em uma função anônima que calcula o fatorial do número por meio de uma função recursiva.
- Além disso, o trabalhador escuta mensagens enviadas através do thread principal utilizando o “self.onmessage” evento, recupera o fatorial do número passado e fornece o resultado ao thread principal por meio do 'postar mensagem()' método.
- No thread principal, crie uma instância de trabalho e envie para ela uma mensagem com o número “ 15h ”. Aqui, ' n ” refere-se ao valor “BigInt”.
- Depois que o trabalhador termina de calcular o fatorial, ele envia o resultado/resultado de volta para o thread principal utilizando o 'postar mensagem()' método.
- Por último, o thread principal busca/recebe o resultado no “na mensagem” evento e retorna o fatorial correspondente do número no console.
Saída
Vantagens dos trabalhadores da Web
Processamento paralelo : No caso de executar o mesmo código de forma paralela.
Sem interrupção na execução do código: A execução do código é feita independentemente de atualizações, etc. na página atual.
Rastreamento de movimento: Toda a detecção de movimento ocorre no trabalhador em segundo plano.
Multithreading habilitado: Eles permitem multithreading em JavaScript.
Desempenho aprimorado: Otimize o desempenho realizando tarefas intensivas/desafiadoras em threads separados.
Experiência de usuário eficaz: Isso evita o bloqueio do thread principal, resultando em uma experiência de usuário responsiva.
Limitações dos trabalhadores da Web
No entanto, também existem algumas limitações dos web workers. Eles são declarados da seguinte forma:
- Maior utilização de memória.
- Não é possível atualizar o DOM em um thread de trabalho ou invocar o objeto de janela.
Conclusão
“Trabalhadores da Web” corresponde a uma API do navegador que permite que o JavaScript execute as tarefas ao mesmo tempo em um thread separado/dedicado. Eles podem ser utilizados tomando uma URL como argumento, que corresponde ao caminho do arquivo de script do trabalhador. Este blog discutiu o uso de “Web Workers” para multithreading em JavaScript.