API de trabalhadores da Web

Índice

Um web trabalhador é um JavaScript executado em segundo plano, sem afetar o desempenho da página.

O que é um trabalhador da Web?

Ao executar scripts em uma página HTML, a página não responde até que o script seja concluído.

Um web trabalhador é um JavaScript executado em segundo plano, de forma independente de outros scripts, sem afetar o desempenho da página. Você pode continuar fazendo o que quiser: clicando, selecionando coisas, etc., enquanto o web trabalhador é executado em segundo plano.

Suporte ao navegador

Os números na tabela especificam as primeiras versões de navegador que suportam totalmente Web Workers:


Chrome 4	IE 10	Firefox 3.5	Safari 4	Opera 11.5
Jan 2010	Sep 2012	Jun 2009	Jun 2009	Jun 2011

Exemplo de trabalhadores da Web

O exemplo abaixo cria um web trabalhador simples que conta números em segundo plano:

Exemplo

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop 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>

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
    // Some code.....
 }
 else {
    // Sorry! No Web Worker support..
 }

Crie um arquivo de trabalhador da Web

Agora, vamos criar nosso web trabalhador em um JavaScript externo.

Aqui, criamos um script que conta. 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 é o método postMessage() - que é usado para postar uma mensagem de volta na página HTML.

Nota: Normalmente web workers não são usados para scripts tão simples, mas para tarefas que exigem mais CPU.

Crie um objeto Web Worker

Agora que temos o arquivo web trabalhador, precisamos chamá-lo de uma página HTML.

As linhas a seguir verificam se o trabalhador já existe, caso contrário - cria um novo objeto web trabalhador e executa o código em "demo_workers.js":

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

Então podemos enviar e receber mensagens do web trabalhador.

Adicione um ouvinte de evento "onmessage" ao web trabalhador.

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

Quando o web trabalhador posta uma mensagem, o código dentro do ouvinte de evento é executado. Os dados do web trabalhador é armazenado em event.data.

Encerrar um Web Worker

Quando um objeto Web Worker é criado, ele continuará escutando mensagens (mesmo após a conclusão do script externo) até ser encerrado.

Para encerrar um web trabalhador e liberar recursos do navegador/computador, use o Método terminate():

w.terminate();

Reutilize o Web Worker

Se você definir a variável de trabalho como indefinida, após ela ter sido encerrada, você pode reutilizar o código:

w = undefined;

Código de exemplo completo do 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>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop 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 você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop 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>

Trabalhadores da Web e o DOM

Como os web workers estão em arquivos externos, eles não têm acesso aos seguintes objetos JavaScript:

O objeto janela
O objeto documento
O objeto pai