HTML Web Workers

Un web worker è un JavaScript che esegue in background, senza influenzare le 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.

Un web worker è un JavaScript che esegue in background, indipendente dagli altri script, senza influenzare le 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 seguente crea un semplice web worker che contggia in background:

Conteggio:

Prova direttamente

Verifica il supporto Web Worker

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

if (typeof(Worker) !== "undefined") {
    // Sì! Supporta Web worker!
    // Alcuni codici.....
}
    // Mi dispiace! 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() - utilizzato per inviare un messaggio alla pagina HTML.

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

Creare 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.

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

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

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

Terminare Web Worker

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

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

w.terminate();

Riutilizzo del Web Worker

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

w = undefined;

Codice completo dell'esempio Web Worker

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

Esempio

<!DOCTYPE html>
<html>
<body>
<p>Conta numeri: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
funzione 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;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
funzione stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Prova direttamente

Web Worker e DOM

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

  • Oggetto window
  • Oggetto document
  • Oggetto parent