HTML Web Workers

Web worker è un JavaScript che esegue in background, non influisce sulle prestazioni della pagina.

Cos'è Web Worker?

Quando si esegue uno script in una pagina HTML, la pagina non è responsiva fino a quando lo script non è completato.

Web worker è un JavaScript che esegue in background, indipendente dagli altri script, non influisce sulle prestazioni della pagina. Puoi continuare a fare qualsiasi cosa tu voglia: cliccare, selezionare contenuti, ecc., mentre il web worker esegue in background.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente Web Worker.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Esempio di HTML Web Workers

Esempio di sotto: viene creato un semplice web worker che conta in background:

Conteggio:

Prova tu stesso

Controlla il supporto di Web Worker

Prima di creare un web worker, controlla se il browser dell'utente lo supporta:

if (typeof(Worker) !== "undefined") {
    // Sì! Supporta Web worker!
    // Alcuni codici.....
} else {
    // Scusate! Non supporta Web Worker!
}

Creare il file Web Worker

Ora, creiamo il nostro web worker in un file JavaScript esterno.

In questo punto, abbiamo creato lo script di conteggio. Il script è memorizzato nel file "demo_workers.js":

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

La parte importante del codice è il metodo postMessage() - viene utilizzato per inviare un messaggio alla pagina HTML.

Commento: Il web worker di solito non viene utilizzato per script così semplici, ma per compiti che richiedono più risorse CPU.

Creare l'oggetto Web Worker

Ora che abbiamo il file web worker, dobbiamo chiamarlo dalla pagina HTML.

La seguente riga di codice verifica l'esistenza del worker, se non esiste, - crea un nuovo oggetto web worker e esegue il codice nel file "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Poi possiamo ricevere messaggi dal web worker.

Aggiungere un ascoltatore di eventi "onmessage" al web worker:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

Quando il web worker trasmette un messaggio, esegue il codice nell'ascoltatore degli eventi. I dati provenienti dal web worker vengono memorizzati in event.data.

Terminare il Web Worker

Dopo aver creato il web worker, continua a ascoltare i messaggi (anche dopo la fine dello script esterno) fino a che non viene terminato.

Per terminare il web worker e liberare le risorse del browser/computer, utilizzare il metodo terminate():

w.terminate();

Riutilizzo del Web Worker

Se impostate la variabile worker a undefined, è possibile riutilizzare il codice dopo che è stato terminato:

w = undefined;

Codice completo dell'esempio Web Worker

Abbiamo già visto il codice Worker nel file .js. Di seguito è riportato il codice della pagina HTML:

Esempio

<!DOCTYPE html>
<html>
<body>
<p>Contare i numeri: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Prova tu stesso

Web Worker e DOM

Poiché i web worker si trovano in file esterni, non possono accedere agli oggetti JavaScript seguenti:

  • Oggetto window
  • Oggetto document
  • Oggetto parent