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> contenente il codice da eseguire (un semplice contatore):

<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 <script>:

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: