Um web worker é um JavaScript em execução em segundo plano, sem afetar o desempenho da página.
O que é um Web Worker ?
Quando a execução de scripts em uma página HTML, a página deixa de responder até que o script for concluído.
Um trabalhador da web, como definido pelo World Wide Web Consortium (W3C) eo Hypertext Aplicação Grupo de Trabalho Tecnologia (WHATWG) Web, é um script JavaScript executado a partir de uma página HTML que é executado em segundo plano, independentemente de outros scripts de interface do usuário que também pode ter sido executado a partir da mesma página HTML. trabalhadores da web são muitas vezes capazes de utilizar CPUs multi-core de forma mais eficaz.
Visão geral
Como previsto por WHATWG, os trabalhadores da web são relativamente pesado-peso. Eles são esperados para ser de longa duração, tem um custo alto desempenho start-up, e um custo de memória de alta por instância.
trabalhadores da Web não se destinam ou esperado para ser usado em grandes números como eles poderiam monopolizar os recursos do sistema.
Trabalhadores da Web permitem a execução simultânea dos fios do navegador e um ou mais segmentos de JavaScript em execução em segundo plano. O navegador que segue um único segmento de execução terá que esperar em programas JavaScript para concluir a execução antes de prosseguir e isso pode levar um tempo significativo que o programador pode gostar de esconder do usuário.
Ele permite que o navegador para continuar com a operação normal durante a execução do script em segundo plano. A especificação trabalhador web é uma especificação separada da especificação HTML5 e pode ser usado com HTML5.
Existem dois tipos de trabalhadores web: trabalhadores dedicados e compartilhados.
Quando os trabalhadores web são executados em segundo plano, eles não têm acesso directo ao DOM, mas comunicar com o documento por mensagem de passagem. Isto permite a execução multi-threaded de programas JavaScript.
Suporte navegador
Os números na tabela especificar a primeira versão do browser que suporta totalmente Web Workers .
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3,5 | 4.0 | 11,5 |
HTML Web Workers Exemplo
O exemplo a seguir cria um simples web worker que contam os números em segundo plano:
Verifique Web Worker Suporte
Antes de criar um web worker , verifique se o navegador do usuário suporta:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Criar um Web Worker Arquivo
Agora, vamos criar o nosso web worker em um JavaScript externo.
Aqui, nós criamos um script que conta. O script é armazenado no "/html/demo_workers.js" file:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
A parte importante do código acima é o postMessage() método - que é usado para enviar uma mensagem de volta à página HTML.
Note: Normalmente, web workers não são utilizados para tais scripts simples, mas para tarefas mais uso intensivo da CPU.
Criar um Web Worker Objeto
Agora que temos o web worker arquivo, precisamos chamá-lo de uma página HTML.
As linhas a seguir verifica se o web worker já existe, se não - ele cria um novo web worker objeto e executa o código em "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
Então, podemos enviar e receber mensagens do web worker .
Adicionar um "onmessage" ouvinte de eventos para o web worker .
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Quando os web worker posta uma mensagem, o código dentro do ouvinte de evento é executado. Os dados do web worker é armazenado em event.data.
Terminar um Web Worker
Quando um web worker objeto é criado, ele vai continuar a ouvir as mensagens (even after the external script is finished) até que seja encerrado.
Para terminar um web worker , e recursos livres navegador / computador, utilize o terminate() método:
w.terminate();
Reutilizar o Web Worker
Se você definir o web worker variável indefinida, depois de ter sido terminada, você pode reutilizar o código:
w = undefined;
Completa Web Worker Código Exemplo
Nós já vimos o Web Worker código no .js arquivo. Abaixo está o código da página HTML:
Exemplo
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html> Tente você mesmo " Web Workers e do DOM
Desde web workers estão em arquivos externos, eles não têm acesso aos seguintes objetos JavaScript:
- O objeto de janela
- O objeto de documento
- O objecto principal