I Web Workers nascono per consentire l’esecuzione di porzioni di codice javascript in modo asincrono: possono essere comparati a dei thread che la pagina web può lanciare e con i quali può dialogare attraverso specifici metodi.

Un piccolo svantaggio …i WebWorkers non hanno accesso al DOM: vanno visti quindi come applicazioni stand-alone per l’esecuzione di compiti impegnativi senza disturbare l’applicazione attuale.

Un semplice WebWorker

Vediamo come avviare un semplice thread:

var myWorker = new Worker('/path/operazioniDaEseguire.js');
    myWorker.onmessage = function(event) {
        console.log('Fatto, ecco i dati!', event.data);
    };

Niente di complicato, quindi: semplicemente eseguiamo il codice presente nel file operazioniDaEseguire.js in maniera asincrora e scriviamo sul log il dati restituiti.

I dati di ritorno vengono inviati al processo padre  da operazioniDaEseguire.js utilizzando il comando postMessage:

//operazioniDaEseguire.js
postMessage("Ho fatto i calcoli, la risposta alla domanda fondamentale sulla Vita, sull'Universo e tutto quanto e'...42!");

Tutto su una pagina?

Possiamo scegliere di non utilizzare un file esterno per definire il codice del nostro worker, impacchettando tutto su una singola pagina utilizzando i Blob .

Dichiariamo quindi un elemento *

<script id="myWorker">
    var i = 0;
    setInterval(function() {
        i++;
        postMessage(i);
    }, 1000);
</script>

e successivamente creiamo e avviamo  il WebWorker a partire da un blob riempito con il contenuto dell’elemento *

var workerData = new Blob([document.getElementById('myWorker').textContent], {
    type: "text/javascript"
});

myWorker = new Worker(window.URL.createObjectURL(workerData));
    myWorker.onmessage = function (e) {
        console.log('Conto...', event.data);
    };

Mettiamo tutto insieme

Vediamo l’esempio completo:

http://jsfiddle.net/AndyFor/VdEzw/embedded/result,js,html/