HTML5: web workers

Quando si esegue gli script in una pagina HTML, la pagina non risponde fino a quando lo script è terminato e dato l’ampio uso che si fa oggi di javascript la cosa a volte inizia a diventare problematica.

Un web workers è un JavaScript che viene eseguito in background, indipendentemente da altri script, senza compromettere le prestazioni della pagina. È possibile continuare a fare quello che vuoi: cliccare, selezionare cose,  mentre il Web Worker viene eseguito in background.

Prepariamo dunque il nostro web worker:

var i=0;
function timedCount(){
i=i+1;
postMessage(i);
setTimeout("timedCount()",1000);
}
timedCount();

Si tratta di un semplice contatore che richiama se stesso ogni secondo grazie al timeout, postMessage() aonsente la comunicazione tra i due documenti, indipendentemente dalla loro collocazione.

La pagina html sarà composta da due bottoni per avviare e fermare il web worker e un campo per l’output, tramite il tag put put di html5 che serve proprio per inserire il risultato di un calcolo.

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

Quello che segue sarà nell’ordine il controllo del supporto da parte dei browser, il controllo sull’inizializzazione dell’oggetto, la creazione dell’oggetto e la gestione dell’output o viceversa il messaggio di errore in caso di mancato supporto.

var w;
function startWorker(){
if(typeof(Worker)!=="undefined"){
if(typeof(w)=="undefined"){
w=new Worker("js/demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else{
document.getElementById("result").innerHTML="Il tuo browser non supporta Web Workers...";
}
}

Ultimo step l’arresto del web worker:

function stopWorker(){
w.terminate();
}

L’esempio