API de trabalhadores da Web HTML

Web workers em HTML é o tópico de discussão. Essencialmente, um web worker é um JavaScript executado no back-end sem afetar a eficiência da página.

Índice-

HTML WebWorkers – O que é?

Em páginas HTML , quando os scripts são executados, a página fica congelada até que o script termine de ser executado.

Existe uma implementação de JavaScript chamada web worker que é executada silenciosamente em segundo plano, independente de outros scripts, e não afeta o desempenho de suas páginas da web. Não há necessidade de parar de fazer o que quiser enquanto o web worker é executado em segundo plano, então você pode continuar clicando, selecionando coisas, etc.

Benefícios do HTML WebWorkers

O HTML Web Workers fornece aos desenvolvedores da Web uma ferramenta poderosa para executar o código JavaScript em um thread separado, liberando o thread principal para outras tarefas. Aqui estão algumas das vantagens de usar HTML Web Workers:

  • Desempenho aprimorado do site: ao executar processos em segundo plano em um thread separado, o HTML Web Workers melhora o desempenho e a capacidade de resposta do site, reduzindo a probabilidade de congelamento ou travamento do site devido ao processamento pesado.
  • Processamento paralelo: HTML Web Workers permitem o processamento paralelo, permitindo que várias tarefas sejam executadas simultaneamente, resultando em experiências de site mais rápidas para os usuários.
  • Experiência de usuário aprimorada: HTML Web Workers ajudam a reduzir o tempo necessário para carregar e processar dados, resultando em uma experiência de site mais responsiva e perfeita para os usuários.
  • Melhor gerenciamento de recursos: HTML Web Workers distribuem a carga de processamento em vários segmentos, reduzindo a carga na CPU e na memória, resultando em um uso mais eficiente dos recursos.
  • Compatibilidade com navegadores legados: HTML Web Workers são compatíveis com a maioria dos navegadores modernos e também podem ser usados ​​com navegadores mais antigos, tornando o site acessível a uma ampla gama de usuários.

Compatibilidade do navegador :

Os números na tabela abaixo indicam a primeira versão do navegador que oferece suporte total ao HTML web worker quando falamos de HTML webworkers .

API
Trabalhadores da Web 4.0 10,0 3.5 4.0 11.5

Exemplo de HTML WebWorkers:

O código HTML a seguir define um webworkers HTML básico que executa uma função de contagem em segundo plano:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><p>Count numbers: <output id="result"></output></p><br><button onclick="startWorker()">Start Worker</button> <br><button onclick="stopWorker()">Stop Worker</button><br><br><p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p><br><br><script><br>var w;<br><br>function startWorker() {<br> if(typeof(Worker) !== "undefined") {<br> if(typeof(w) == "undefined") {<br> w = new Worker("demo_workers.js");<br> }<br> w.onmessage = function(event) {<br> document.getElementById("result").innerHTML = event.data;<br> };<br> } else {<br> document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers…";<br> }<br>}<br><br>function stopWorker() { <br> w.terminate();<br> w = undefined;<br>}<br></script><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Criação de arquivo do Web Worker:

Vamos aplicar JavaScript externo para implementar nosso web worker.

O objetivo aqui é escrever um script que conte. Você pode encontrar este script no arquivo “demo-workers.js”:

var i = 0; function timedCount()
{ i = i + 1;

postMessage(i);
setTimeout(“timedCount()”,500);
}

timedCount();

O método postMessage(), que envia uma mensagem de volta para a página HTML , é um componente chave do código acima.

Importante: Web workers geralmente são implementados para tarefas com uso intensivo de CPU, em vez de scripts simples.

Verifique a compatibilidade do Web Worker:

Certifique-se de que o navegador da web do usuário seja compatível com os web workers antes de habilitar um:

if (typeof(Worker) !== “undefined”) {
// Yes, of course! We support web workers!
// A few lines of code…..
}
else {
// Sorry for the inconvenience! Web Worker support is not available.
}

Criação de objetos Web Worker:

Após obter o arquivo HTML webworkers , o próximo passo é aplicá-lo em uma página HTML.

Aqui está o código que verifica se o worker já ocorreu, caso não, cria um novo objeto worker e executa o código em “demo-workers.js”:

if (typeof(w) == “undefined”) { w = new Worker(“demo-workers.js”);
}

As mensagens podem então ser enviadas e recebidas pelo web worker.

Para o trabalhador da web, inclua um ouvinte de evento “onmessage”.

w.onmessage = function(event){ document.getElementById(“result”).innerHTML = event.data;
};

Em resposta a um web worker postando uma mensagem, o event listener é ativado. Os dados coletados pelo web worker são armazenados em event.data.

Reutilização de Web Worker:

Você pode usar o código novamente definindo a variável de trabalho como indefinida depois de encerrada:

w = undefined;

Rescisão do Web Worker:

Mesmo após a conclusão da execução do script externo – Um objeto de trabalho da Web que foi estabelecido continuará a ouvir mensagens até que seja encerrado.

Utilizar o método Terminate() permitirá que você encerre um web worker, liberando recursos no navegador e no computador.

w.terminate();

Exemplo de código de trabalhador da web completo:

No arquivo.js, já vimos o código Worker. Aqui está o código da página HTML:

Aqui está um exemplo de web workers em HTML:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<body><p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button><script>
var w;function startWorker()
{if (typeof(Worker) !== "undefined")
{
if (typeof(w) == "undefined") {
w = new Worker("demo-workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
else
{document.getElementById("result").innerHTML = "We're sorry! It does not support Web Workers.";
}
}function stopWorker()
{
w.terminate();
w = undefined;
}
</script></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Trabalhadores da Web e o DOM

Os webworkers HTML não têm acesso a esses objetos JavaScript porque estão localizados em arquivos externos:

  • objeto janela
  • Objeto de documento
  • objeto pai

Trabalhadores da Web e o DOM na visão geral do HTML

Os Web Workers e o DOM são dois elementos cruciais no desenvolvimento da Web que podem ser usados ​​juntos em HTML para obter vários benefícios. No entanto, também existem limitações que precisam ser consideradas. Aqui está uma análise dos benefícios e limitações de usar Web Workers e o DOM juntos em HTML:

Benefícios:

  • Separe o thread de interface do usuário: ao usar Web Workers para executar tarefas em segundo plano, como processamento de dados, o thread de interface do usuário pode permanecer responsivo, resultando em uma melhor experiência do usuário.
  • Manipule o DOM: Web Workers podem manipular o DOM, permitindo que os desenvolvedores da Web atualizem o conteúdo e a estrutura do site dinamicamente. Essa abordagem permite que os desenvolvedores da Web criem páginas da Web interativas e responsivas.
  • Comunicação entre threads: Web workers podem se comunicar com o thread principal usando protocolos de mensagens, permitindo que o processamento de dados seja executado em um thread separado enquanto exibe os resultados no thread de interface do usuário.

Limitações:

  • Não é possível acessar diretamente o DOM: Web Workers não podem acessar diretamente o DOM porque o DOM não é thread-safe. Portanto, os desenvolvedores devem usar protocolos de mensagens para se comunicar entre threads e manipular o DOM de acordo.
  • Complexidade: O uso de Web Workers e do DOM juntos pode aumentar a complexidade do desenvolvimento da Web, exigindo esforços adicionais de programação e depuração.
  • Compatibilidade de navegador limitada: Web workers não são suportados por alguns navegadores da web mais antigos, limitando sua compatibilidade com sistemas legados.
Assine nosso boletim informativo abaixo, fique conectado com as informações técnicas mais recentes neste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.