Trabalhos da Web

O Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript introduzem o suporte para Trabalhos da Web. A API de Trabalhos da Web define uma maneira de executar scripts em segundo plano. Os Web Workers são definidos na especificação de Web Workers do W3C (World Wide Web Consortium)

Tradicionalmente, os navegadores possuem thread único, forçando todos os scripts de seus aplicativos a serem executados juntos em um único thread de interface do usuário. Embora seja possível criar a ilusão de haver diversas ações acontecendo ao mesmo tempo com os eventos DOM (Document Object Model) e a API setTimeout, basta uma tarefa com uso intensivo dos recursos computacionais para interromper bruscamente a experiência do usuário.

A API de Trabalho da Web fornece uma maneira de os autores de aplicativos Web gerarem scripts de segundo plano que são executados em paralelo com a página principal. Você pode gerar vários threads de cada vez para usar em tarefas de longa duração. Um novo objeto de trabalho exige um arquivo .js, que é incluído via solicitação assíncrona ao servidor.


var myWorker = new Worker('worker.js');

Toda a comunicação de e para o thread de trabalho é gerenciada por meio de mensagens. Tanto o trabalho de hospedagem quanto o script de trabalho podem enviar mensagens usando postMessage e escutar uma resposta usando o evento onmessage. O conteúdo da mensagem é enviado como a propriedade de dados do evento.

O exemplo a seguir cria um thread de trabalho e ouve uma mensagem.


var hello = new Worker('hello.js');
hello.onmessage = function(e) {
  alert(e.data);
};

O thread de trabalho envia a mensagem a ser exibida.


postMessage('Hello world!');

Comunicação bidirecional com Trabalhos da Web

Para configurar a comunicação bidirecional, a página principal e o thread de trabalho ouvem o evento onmessage. No exemplo a seguir, o thread de trabalho retorna a mensagem após um atraso especificado.

Primeiramente, o script cria o thread de trabalho.


var echo = new Worker('echo.js'); 
echo.onmessage = function(e) {
  alert(e.data); 
}

O texto da mensagem e os valores de tempo limite são especificados em um formulário. Quando o usuário clica no botão de envio, o script passa duas informações para o trabalho em um objeto literal JavaScript. Para evitar que a página envie os valores do formulário em uma nova solicitação HTTP, o manipulador de eventos também chama preventDefault no objeto de evento. Não é possível enviar referências a objetos DOM para um thread de trabalho. Os dados que os Trabalhos da Web podem acessar são limitados. Somente primitivos JavaScript, como valores Objeto ou Cadeia de Caracteres, são permitidos.


<script>
window.onload = function() {
  var echoForm = document.getElementById('echoForm'); 
  echoForm.addEventListener('submit', function(e) {
    echo.postMessage({
      message : e.target.message.value,
      timeout : e.target.timeout.value
    }); 
    e.preventDefault();
  }, false); 
  }
</script>
<form id="echoForm">
  <p>Echo the following message after a delay.</p>
  <input type="text" name="message" value="Input message here."/><br/>
  <input type="number" name="timeout" max="10" value="2"/> seconds.<br/>
  <button type="submit">Send Message</button>
</form>


Por fim, o trabalho escuta a mensagem e a retorna após o intervalo de tempo limite especificado.


onmessage = function(e) 
{
  setTimeout(function() 
  {
    postMessage(e.data.message);
  }, 
  e.data.timeout * 1000);
}

No Internet Explorer 10 e em aplicativos da Windows Store que usam JavaScript, a API de Trabalhos da Web dá suporte para os métodos a seguir.

MétodoDescrição

void close();

Encerra o thread de trabalho.

void importScripts(inDOMString... urls);

Importa uma lista separada por vírgulas de arquivos JavaScript adicionais.

void postMessage (se houver dados);

Envia uma mensagem para ou a partir do thread de trabalho.

 

O Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript dão suporte para os seguintes atributos de API de Trabalhos da Web:

AtributoTipoDescrição
locationWorkerLocationRepresenta uma URL absoluta, incluindo os componentes protocol, host, port, hostname, pathname, search e hash.
navigatorWorkerNavigatorRepresenta a identidade e o estado onLine do cliente do agente do usuário.
selfWorkerGlobalScopeO escopo do trabalho, que inclui os objetos WorkerLocation e WorkerNavigator.

 

O Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript dão suporte para os seguintes eventos de API de Trabalhos da Web:

EventoDescrição

onerror

Ocorreu um erro de tempo de execução.

onmessage

Dados de mensagem recebidos.

 

WindowTimers

A API de Trabalhos da Web também dá suporte para a funcionalidade WindowTimers atualizada do HTML5.

MétodoDescrição

void clearInterval(inlonghandle);

Cancela um tempo limite identificado pelo identificador.

void clearTimeout(inlonghandle);

Cancela um tempo limite identificado pelo identificador.

long setInterval(inanyhandler, inoptionalanytimeout, inany... args);

Agenda um tempo limite para ser executado repetidamente após o número de milissegundos especificado. Agora é possível passar argumentos adicionais diretamente para o manipulador. Se o manipulador for um DOMString, será compilado como JavaScript. Retorna um identificador para o tempo limite. Limpa com clearInterval.

long setTimeout(inanyhandler, opcionalmente qualquer tempo limite, em qualquer argumento);

Agenda um tempo limite para ser executado após o número de milissegundos especificado. Agora é possível passar argumentos adicionais diretamente para o manipulador. Se o manipulador for um DOMString, será compilado como JavaScript. Retorna um identificador para o tempo limite. Limpa com clearTimeout.

 

Atualizações para Trabalhos da Web no IE10 Platform Preview, Compilação 4

O Internet Explorer 10 Platform Preview, Compilação 4, impõe um limite de 25 threads de Trabalho da Web por processo. É possível criar mais trabalhos no script, mas somente 25 ficarão ativos ao mesmo tempo.

A criação de um trabalho não gera uma exceção caso o número máximo de threads seja atingido. A chamada sempre terá êxito e você poderá adicionar manipuladores e postar mensagens nela. No entanto, o trabalho poderá não ser iniciado até que um dos 25 threads existentes esteja disponível.


// Coding pattern before IE10 Platform Preview Build 4
try {
    var worker = new Worker(url);
} catch(ex) {
    // IE might throw...?
}

// After IE10 Platform Preview Build 4
var worker = new Worker(url);
// Continue with confidence...

Referência de API

Web Workers

Amostras e tutoriais

Exemplo de Web Workers
Como explorar o conjunto de Mandelbrot usando HTML5

Demonstrações do Test Drive do Internet Explorer

Mandelbrot Explorer
As fontes do Web Worker
Uso de Web Worker para test262

Postagens no blog do IE

Depurando Web Workers in IE10
Web Workers no IE10: o JavaScript em segundo plano deixa aplicativos Web mais rápidos

Especificação

Trabalhos da Web

Tópicos relacionados

HTML5 Threading com Trabalhos da Web e Armazenamento de Dados com IndexedDB
Introdução ao Web Workers do HTML5: a abordagem de multithreading do JavaScript

 

 

Mostrar: