API Worker Web

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 è inattiva fino a che lo script non è completato.

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 iniziale di ogni browser che supporta completamente Web Workers:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Gennaio 2010 Settembre 2012 Giugno 2009 Giugno 2009 Giugno 2011

Esempio di Web Worker

Esempio seguente crea un semplice Web Worker che calcola numeri in background:

Esempio

Conteggio:

Prova da solo

Controlla il browser Web Worker

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

if (typeof(Worker) !== "undefined") {
  // Sì! Supporto per Web worker!
  // Alcuni codici.....
} else {
  // Spiace! Nessun supporto per Web Worker..
}

创建 Web Worker 文件

Ora, creiamo il nostro Web Worker in JavaScript esterno.

Ecco uno script importante che viene memorizzato nel file "demo_workers.js":

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

La parte importante del codice sopra è postMessage() Metodo - Utilizzato per inviare messaggi alla pagina HTML.

Nota:Di solito il web worker non viene utilizzato per script semplici di questo tipo, ma per task intensivi dal punto di vista della CPU.

Creare oggetto Web Worker

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

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

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

Poi possiamo inviare e ricevere messaggi dal web worker.

Aggiungere un "onmessage" event listener al web worker.

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

Quando il Web Worker pubblica un messaggio, viene eseguito il codice nell'event listener. I dati provenienti dal Web Worker sono memorizzati in event.data.

Terminare Web Worker

Quando l'oggetto web worker viene creato, continua a ascoltare i messaggi (anche dopo che lo script esterno è completato) fino a quando non viene terminato.

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

w.terminate();

Riutilizzo del Web Worker

Se si imposta la variabile worker a undefined, dopo che esso si è terminato, è possibile riutilizzare il seguente codice:

w = undefined;

Codice completo dell'esempio Web Worker

Abbiamo visto il codice del 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>
<script>
let w;
funzione startWorker() {
  se (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
funzione stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

Prova da solo

Web Worker e DOM

Poiché i Web Worker si trovano in file esterni, non possono accedere ai seguenti oggetti JavaScript:

  • Oggetto window
  • Oggetto document
  • Oggetto parent