Tutorial HTML

HTML HOME Introdução HTML Editores de HTML HTML básico Elementos HTML Atributos HTML Títulos HTML Parágrafos HTML Estilos HTML Formatação HTML Cotações HTML Comentários HTML Cores HTML HTML CSS Links HTML Imagens HTML HTML Favicon Tabelas HTML Listas HTML Bloco HTML e Inline Classes HTML Código HTML Iframes HTML JavaScript HTML Caminhos de arquivo HTML Cabeçalho HTML Esquema HTML HTML Responsivo Código de computador HTML Semântica HTML Guia de estilo HTML Entidades HTML Símbolos HTML Emojis HTML Conjunto de caracteres HTML Codificação de URL HTML HTML vs. XHTML

Formulários HTML

Formulários HTML Atributos de formulário HTML Elementos de formulário HTML Tipos de entrada HTML Atributos de entrada HTML Atributos do formulário de entrada HTML

Gráficos HTML

Tela HTML HTML SVG

Mídia HTML

Mídia HTML Vídeo HTML Áudio HTML Plug-ins HTML HTML YouTube

APIs HTML

Geolocalização HTML Arrastar/Soltar HTML Armazenamento Web HTML Trabalhadores da Web HTML HTML SSE

Exemplos HTML

Exemplos HTML Questionário HTML Exercícios HTML Certificado HTML Resumo HTML Acessibilidade HTML

Referências HTML

Lista de tags HTML Atributos HTML Atributos Globais HTML Suporte ao navegador HTML Eventos HTML Cores HTML Tela HTML Áudio/vídeo HTML Tipos de documento HTML Conjuntos de caracteres HTML Codificação de URL HTML Códigos HTML Lang Mensagens HTTP Métodos HTTP PX to EM Converter Atalhos do teclado

API de HTML Web Workers


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


O que é um Web Worker?

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

Um web worker é um JavaScript executado em segundo plano, independentemente de outros scripts, sem afetar o desempenho da página. Você pode continuar fazendo o que quiser: clicar, selecionar coisas, etc., enquanto o web worker é executado em segundo plano.


Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total aos Web Workers.

API
Web Workers 4.0 10.0 3.5 4.0 11.5

Exemplo de HTML Web Workers

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

Exemplo

Count numbers:


Verifique o suporte ao trabalhador da Web

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

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


Criar um arquivo de trabalhador da Web

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

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

Nota: Normalmente, os web workers não são usados ​​para scripts tão simples, mas para tarefas mais intensivas da CPU.


Criar um objeto Web Worker

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

As linhas a seguir verificam se o trabalhador já existe, caso contrário - ele cria um novo objeto de trabalhador da web 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 worker.

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

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

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


Encerrar um Web Worker

Quando um objeto de trabalho da Web é criado, ele continuará a ouvir mensagens (mesmo após a conclusão do script externo) até que seja encerrado.

Para encerrar um web worker e liberar recursos de navegador/computador, use o terminate()método:

w.terminate();

Reutilize o Web Worker

Se você definir a variável do trabalhador como indefinida, depois que ela for encerrada, poderá reutilizar o código:

w = undefined;

Código de exemplo de trabalhador da Web completo

Já vimos o código do Worker no arquivo .js. Abaixo está o código para a 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>
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;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
  }
}

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 do documento
  • O objeto pai