O que são trabalhadores da Web?
Este artigo é sobre como usar os trabalhadores da Web e sua importância no mecanismo de script HTML5.Java criado com um único encadeamento e não há processo simultâneo por trás deles (nenhum outro processo é executado até que o primeiro processo seja concluído). Como o javascript é executado em primeiro plano e torna a página da Web demorada. Portanto, para evitar esse grande problema, o HTML5 criou uma nova tecnologia chamada Web workers. É um pequeno script em segundo plano que calcula tarefas caras, sem interferir na interface do usuário ou no desempenho da página da web. Esse segmento isolado é relativamente leve e é suportado em todos os navegadores da web. Isso faz com que o HTML inicie threads adicionais.
Tipos de trabalhadores da Web em HTML5
Trabalhadores da Web também são chamados de "trabalhadores dedicados". Eles têm um modelo de memória compartilhada separado. Em outras palavras, podemos dizer que um escopo javascript inteiro foi executado em um único encadeamento. Enquanto trabalhava em um navegador da Web, encontramos uma mensagem na caixa de diálogo da pista devido ao processamento pesado da página. Para fornecer uma boa solução, a API HTML do navegador da Web criou diferentes cálculos ao mesmo tempo.
Três tipos importantes de trabalhadores da Web são apresentados abaixo:
1. Trabalhador da Web Compartilhado
Esse tipo faz uso da API e cada unidade de trabalho tem várias conexões ao enviar uma mensagem (vários scripts), desde que cada contexto seja da mesma origem. O suporte ao navegador deste trabalhador é limitado. Eles são chamados usando o construtor worker () compartilhado.
2. Trabalhador da Web dedicado
Criar um arquivo é muito simples, basta chamar um Construtor com seu caminho de origem. Eles usam a comunicação de mensagens chamada método post message () durante a transferência de mensagens. Até os manipuladores de eventos são usados quando algum ouvinte ocorre. O manipulador onmessage () é usado para receber uma mensagem.
3. Trabalhador de Serviço
Este trabalhador não interage diretamente com a página da web e é executado em segundo plano. Eles podem restaurar sempre que necessário e agir como um proxy, eles podem ser acessados por vários threads.
Como criar um arquivo de trabalhadores da Web?
Eles não têm suporte para alguns recursos, como o objeto de janela, DOM, o objeto pai. Todas as funções são executadas passando uma réplica delas.
Etapa 1: Para criar um construtor Importador de arquivos Worker () Um arquivo é criado usando um novo objeto e o script se parece.
var worker = new Worker(sample.js);
Etapa 2: criação da mensagem de postagem (). Os arquivos de trabalho criados chamam automaticamente o método post message (). Os métodos post message () direcionam a mensagem que passa para o thread principal. E da mesma forma, podemos enviar uma mensagem do thread principal para o thread de trabalho. Por aqui o trabalhador começa.
worker. postMessage();
Etapa 3: Avançar para lançar o manipulador de eventos, para permitir a mensagem do trabalhador da Web.
worker. onmessage = function(event)
A partir de agora, vimos como enviar e receber mensagens. Agora, vamos ver como finalizar o trabalhador no meio do processo.
Etapa 4: para parar o processo.
worker.terminate()
Etapa 5: implementar um cenário de tratamento de erros que o trabalhador usa.
Worker.onerror();
Os 9 principais recursos dos trabalhadores da Web em HTML5
- Os trabalhadores da Web, sendo protocolo assíncrono, eram os mais adequados para realizar tarefas computacionais e considerados os recursos profissionais do Javascript.
- Os profissionais da Web pagam uma plataforma de execução rigorosa para janelas móveis e de desktop, permitindo executar a página da Web sem congelar a página da Web nos navegadores.
- O principal benefício é que podemos executar processos caros em um único thread individual que não interrompe o thread principal em execução.
- Trabalhadores da Web são pequenos segmentos de peso leve que vivem individualmente intercalando a interface do usuário.
- Trabalhadores da Web sendo tópicos orientados ao kernel ajudam a alcançar o alto desempenho da página dos navegadores.
- Os profissionais da Web ajudam na criação de programação paralela e realizam ações de multithreading.
- Trabalhadores da Web aumentam a velocidade do aplicativo Java JScript.
- O trabalhador da Web é considerado um script do lado do cliente e usado mais alto em aplicativos de jogos.
- Os encadeamentos do trabalhador da Web se comunicam usando o método de retorno de chamada post Message ().
Exemplos de trabalhadores da Web em HTML5
Os trabalhadores da Web têm acesso ao navegador, Solicitação XMLHTTP, Navegador devido a suas atividades de multiprocessamento. O exemplo abaixo concentra-se em tipos de trabalhadores dedicados a serem demonstrados.
Exemplo 1
Mostra arquivo de exemplo de trabalhador Demonstrando o funcionamento do navegador.
Código:
Web Worker Demo
Validating the browser compatibility of Web Browsers
Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)
Web Worker Demo
Validating the browser compatibility of Web Browsers
Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)
Web Worker Demo
Validating the browser compatibility of Web Browsers
Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)
Web Worker Demo
Validating the browser compatibility of Web Browsers
Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)
Resultado:
Exemplo 2
O exemplo a seguir mostra como as tarefas do trabalhador são executadas atrás da tarefa usando a classe e a contagem é feita para as tarefas do trabalhador. As tarefas do trabalhador atualizam automaticamente a página da web em cada loop até que o loop termine. Para finalizar a execução do trabalhador, terminate () é usado aqui.
O trabalho realizado em segundo plano pelo trabalhador da Web:
Código:
wrk.html
Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )
start worker terminate
start blocking thread
test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)
Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)
Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )
start worker terminate
start blocking thread
test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)
Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)
Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )
start worker terminate
start blocking thread
test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)
Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)
Resultado:
Conclusão
Até o fim, vimos como os trabalhadores da Web trabalham independentemente do segmento principal que ajuda as organizações da Web a criar aplicativos exigentes. E é altamente recomendável usar trabalhadores da Web em javascript para tarefas pesadas. Sugere-se que, quando o navegador da Web não estiver mais em uso, seja fechado para consumir os recursos do sistema.
Artigo recomendado
Este é um guia para trabalhadores da Web em HTML5. Aqui discutimos os 9 principais recursos do HTML5 Web Workers e seus exemplos com a implementação de código. Você também pode consultar nossos artigos sugeridos para saber mais -
- Novos elementos do HTML5 | 10 principais
- Quadros HTML com sintaxe
- Introdução às vantagens do HTML
- As 10 principais perguntas e respostas da entrevista em HTML5