Você sabia que pode multithread em JavaScript?

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!