Web Workers em HTML

Web worker é um JavaScript executado em segundo plano, sem afetar o desempenho da página.

O que é Web Worker?

Quando o script é executado na página HTML, a página não é responsiva até que o script seja concluído.

Web worker é um JavaScript executado em segundo plano, independente de outros scripts, sem afetar o desempenho da página. Você pode continuar a fazer o que quiser: clicar, selecionar conteúdo, etc., enquanto o web worker roda em segundo plano.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente o Web Worker.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Exemplo de Web Workers em HTML

O exemplo a seguir cria um web worker simples, contando em segundo plano:

Contagem:

Experimente você mesmo

Detecção de suporte ao Web Worker

Antes de criar o web worker, verifique se o navegador do usuário suporta ele:

if (typeof(Worker) !== "undefined") {
    // Sim! Suportado Web Worker!
    // Alguns código.....
}
    // Desculpe! Não é suportado Web Worker!
}

Criar arquivo do Web Worker

Agora, vamos criar nosso web worker em um arquivo JavaScript externo.

Aqui, criamos o script de contagem. O script está armazenado no arquivo "demo_workers.js":

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

A parte importante do código acima é o método postMessage() - ele é usado para enviar uma mensagem de volta para a página HTML.

Comentário: O web worker geralmente não é usado para scripts simples assim, mas para tarefas que consomem mais recursos de CPU.

Criar objeto Web Worker

Agora que temos o arquivo web worker, precisamos chamá-lo da página HTML.

A linha de código a seguir verifica se o worker existe. Se não existir, - ele cria um novo objeto web worker e executa o código do arquivo "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Então podemos receber mensagens do web worker.

Adicionar um ouvinte de evento "onmessage" ao web worker:

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

Quando o web worker envia uma mensagem, o código no ouvinte de eventos é executado. Os dados vindos do web worker são armazenados em event.data.

Terminar Web Worker

Após a criação do web worker, ele continuará a ouvir mensagens (mesmo após o script externo ser concluído) até que seja terminado.

Para terminar o web worker e liberar recursos do navegador/computador, use o método terminate():

w.terminate();

Reutilização do Web Worker

Se você definir a variável worker como undefined, você pode reutilizar o código após o término do worker:

w = undefined;

Código completo do exemplo Web Worker

Já vimos o código do Worker no arquivo .js. Abaixo está o código da página HTML:

Exemplo

<!DOCTYPE html>
<html>
<body>
<p>Contar números: <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("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Experimente você mesmo

Web Worker e DOM

Devido ao fato de que os web workers estão em arquivos externos, eles não podem acessar os seguintes objetos JavaScript:

  • Objeto 'window'
  • Objeto 'document'
  • Objeto 'parent'