E é muito fácil também. Você está fazendo um jogo HTML5 e precisa construir um mapa aleatório ou pixels duplicados? Você está buscando uma grande solicitação JSON? Apresentando Web Workers !
Dedicated Web Workers provide a simple means for web content to run scripts in background threads. Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator.
https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers
TL; DR: Os Web Workers são fantásticos, vá usá-los.
Na era dos aplicativos HTML5, é muito importante fornecer uma IU ágil e responsiva. Essa ideia morre rapidamente quando você está fazendo operações pesadas em JavaScript e pode acabar bloqueando as interações, resultando em uma experiência ruim para o usuário. Os Web Workers apresentam uma maneira de fazer essas operações em um thread diferente (e talvez até mesmo em um núcleo de CPU diferente) sem bloquear o thread de UI!
Antes de nos aprofundarmos no código, quero que você dê uma olhada neste teste da Microsoft, que mostra o desempenho dos web workers: http://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/
var url = 'http://bigcontentprovider.com/hugejsonfile';
Vamos criar uma função que utiliza um web worker para importar e analisar um arquivo JSONP
var f = '(function() {
send = function(e) {
// Send something to the main thread
postMessage(e);
// Close the worker gracefully, letting it clean up
// after itself
self.close();
};
// Import the JSONP file. Remember, this is a JSONP request,
// so the script we are fetching will execute itself
// after load using the specified callback function
importScripts("' + url + '?format=json&callback=send");
})();';
Os Web Workers normalmente aceitam arquivos como argumentos ao criar um, portanto, precisaremos criar um Blob , um personificador de arquivo. Leia mais sobre isso aqui: https://developer.mozilla.org/en-US/docs/Web/API/Blob
// Using the stringed function f from above, we are creating
// a file like object
var _blob = new Blob([f], { type: 'text/javascript' });
É aqui que a mágica acontece. Estamos iniciando um novo trabalhador com o script que escrevi acima usando window.URL.createObjectURL, uma função que cria uma URL de objeto que estamos usando no lugar de um nome de arquivo. Leia mais aqui: https://developer.mozilla.org/en-US/docs/Web/API/window.URL.createObjectURL
// To add webkit support, replace window.URL with
// (window.webkitURL || window.URL)
_worker = new Worker(window.URL.createObjectURL(_blob));
Se você já tem um arquivo de script que gostaria de executar, especifique o caminho do arquivo como uma string, assim:
_worker = new Worker('file.js');
Para reagir a qualquer coisa que o trabalhador faça e nos envie, precisaremos escutar os eventos no thread principal . Aqui, registraremos o evento e os dados do evento, que, neste caso, é o objeto JSON analisado.
_worker.onmessage = function(e) { console.log(e, e.data) };
// We will also want to be notified if the worker runs into trouble
_worker.onerror = function(e) { console.log('Error:', e) };
// Start the worker!
_worker.postMessage();
Foi fácil, não foi? O suporte do navegador também é bastante bom ( http://caniuse.com/#search=web%20workers ). Se alguém estiver usando um navegador mais antigo, você pode simplesmente carregar o script no thread principal. Usar um web worker tem algumas limitações, mas faz todo o sentido:
Workers do NOT have access to:
- The DOM (it's not thread-safe)
- The window object
- The document object
- The parent object
http://www.html5rocks.com/en/tutorials/workers/basics/
Agora vá lá e crie aplicativos da web não lentos!