API Web Workers
Un web worker è un JavaScript in esecuzione in background, senza influire sulle prestazioni della pagina.
Che cos'è un Web Worker?
Quando si eseguono script in una pagina HTML, la pagina non risponde fino al termine dello script.
Un web worker è un JavaScript che viene eseguito in background, indipendentemente da altri script, senza influire sulle prestazioni della pagina. Puoi continuare a fare quello che vuoi: fare clic, selezionare cose, ecc., mentre il web worker viene eseguito in background.
Supporto browser
I numeri nella tabella specificano le prime versioni del browser che supportano completamente i Web Worker:
| Chrome 4 | IE 10 | Firefox 3.5 | Safari 4 | Opera 11.5 |
| Jan 2010 | Sep 2012 | Jun 2009 | Jun 2009 | Jun 2011 |
Esempio di Web Worker
L'esempio seguente crea un semplice web worker che conta i numeri in background:
Esempio
Controlla il supporto per i webworker
Prima di creare un web worker, verifica se il browser dell'utente lo supporta:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Crea un file di lavoro Web
Ora creiamo il nostro web worker in un JavaScript esterno.
Qui creiamo uno script che conta. Lo script è archiviato nel file "demo_workers.js":
let i = 0;
function timedCount()
{
i ++;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
La parte importante del codice sopra è il postMessage()metodo, che viene utilizzato per inviare un messaggio alla pagina HTML.
Nota: normalmente i web worker non vengono utilizzati per script così semplici, ma per attività che richiedono più CPU.
Crea un oggetto Web Worker
Ora che abbiamo il file di lavoro web, dobbiamo chiamarlo da una pagina HTML.
Le righe seguenti controllano se il lavoratore esiste già, in caso contrario, crea un nuovo oggetto web worker ed esegue il codice in "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Quindi possiamo inviare e ricevere messaggi dal web worker.
Aggiungi un listener di eventi "onmessage" al web worker.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Quando il web worker pubblica un messaggio, il codice all'interno del listener di eventi viene eseguito. I dati del web worker vengono archiviati in event.data.
Termina un Web Worker
Quando un oggetto Web worker viene creato, continuerà ad ascoltare i messaggi (anche dopo che lo script esterno è terminato) fino alla sua chiusura.
Per terminare un web worker e liberare risorse del browser/computer, utilizzare il
terminate()metodo:
w.terminate();
Riutilizza il Web Worker
Se imposti la variabile di lavoro su undefined, dopo che è stata terminata, puoi riutilizzare il codice:
w = undefined;
Codice di esempio di Web worker completo
Abbiamo già visto il codice Worker nel file .js. Di seguito è riportato il codice per la pagina HTML:
Esempio
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker()
{
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
I Web Workers e il DOM
Poiché i web worker si trovano in file esterni, non hanno accesso ai seguenti oggetti JavaScript:
- L'oggetto finestra
- L'oggetto del documento
- L'oggetto genitore