API de Trabalhador da Web

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

O que é Web Worker?

Quando executa scripts em páginas HTML, a página está inativa até que o script seja concluído.

Web Worker é 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 Web Workers:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Janeiro de 2010 Setembro de 2012 Junho de 2009 Junho de 2009 Junho de 2011

Instância de Web Worker

O exemplo a seguir cria um Web Worker simples, que calcula números em segundo plano:

Exemplo

Contagem:

Experimente por Si Mesmo

Verificar navegador Web Worker

Antes de criar o Web Worker, verifique se o navegador do usuário suporta ele:

if (typeof(Worker) !== "undefined") {
  // Sim! Suporte para Web worker!
  // Alguns código.....
} else {
  // Desculpe! Sem suporte para Web Worker..
}

Criar arquivo Web Worker

Agora, vamos criar nosso Web Worker no JavaScript externo.

Aqui, criamos um script importante. O script é armazenado no arquivo "demo_workers.js":

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

A parte importante do código acima é postMessage() Método - Usado para enviar mensagens de volta para a página HTML.

Nota:Normalmente, o web worker não é usado para scripts simples, mas para tarefas intensivas de CPU.

Criar objeto Web Worker

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

A seguir, uma linha de código verifica se o worker já 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");
}

Depois disso, podemos enviar e 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 publicar uma mensagem, o código no ouvinte de eventos será executado. Os dados do Web Worker são armazenados em event.data.

Terminar Web Worker

Quando o objeto web worker é criado, 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 terminate() Método:

w.terminate();

Reutilizar Web Worker

Se o variável worker for definida como undefined, você pode reutilizar o seguinte código após a sua terminação:

w = undefined;

Código completo de exemplo de 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()">Iniciar Trabalhador</button>
<button onclick="stopWorker()">Parar Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

Experimente por Si Mesmo

Web Worker e DOM

Devido ao Web Worker estar em um arquivo externo, eles não podem acessar os seguintes objetos JavaScript:

  • Objeto window
  • Objeto document
  • Objeto parent