Esercitazione HTML

HTML HOME Introduzione all'HTML Editor HTML HTML di base Elementi HTML Attributi HTML Intestazioni HTML Paragrafi HTML Stili HTML Formattazione HTML Citazioni HTML Commenti HTML Colori HTML CSS HTML Collegamenti HTML Immagini HTML Favicon HTML Tabelle HTML Elenchi HTML Blocco HTML e in linea Classi HTML ID HTML Iframe HTML JavaScript HTML Percorsi di file HTML Testa HTML Layout HTML HTML reattivo Codice informatico HTML Semantica HTML Guida allo stile HTML Entità HTML Simboli HTML Emoji HTML Set di caratteri HTML Codifica URL HTML HTML e XHTML

Moduli HTML

Moduli HTML Attributi del modulo HTML Elementi del modulo HTML Tipi di input HTML Attributi di input HTML Attributi del modulo di input HTML

Grafica HTML

Tela HTML HTML SVG

Supporto HTML

Supporto HTML Video HTML Audio HTML Plug-in HTML YouTube HTML

API HTML

Geolocalizzazione HTML Trascina/rilascia HTML Archiviazione Web HTML Lavoratori Web HTML HTML SSE

Esempi HTML

Esempi HTML Quiz HTML Esercizi HTML Certificato HTML Riepilogo HTML Accessibilità HTML

Riferimenti HTML

Elenco tag HTML Attributi HTML Attributi globali HTML Supporto browser HTML Eventi HTML Colori HTML Tela HTML Audio/video HTML Tipi di documenti HTML Set di caratteri HTML Codifica URL HTML Codici HTML Lang Messaggi HTTP Metodi HTTP Convertitore da PX a EM Tasti rapidi

API di lavoro Web HTML


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 la prima versione del browser che supporta completamente i Web Worker.

API
Web Workers 4.0 10.0 3.5 4.0 11.5

Esempio di lavoro Web HTML

L'esempio seguente crea un semplice web worker che conta i numeri in background:

Esempio

Count numbers:


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":

var i = 0;

function timedCount() {
  i = i + 1;
  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>
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>

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