PROFILBARU.COM

Un web worker, come definito dal World Wide Web Consortium (W3C) e dal Web Hypertext Application Technology Working Group (WHATWG), è uno script JavaScript che viene eseguito in background in una pagina HTML indipendentemente dagli script dell'interfaccia utente.^[1] I Web worker sono spesso in grado di utilizzare le CPU multi-core in modo più efficiente.^[2]

Il W3C e WHATWG considerano i web worker come script a esecuzione prolungata che non vengono interrotti dagli script dell'interfaccia utente (che rispondono ai clic o ad altre interazioni dell'utente). Il fatto di impedire a tali worker di essere interrotti dalle attività utente dovrebbe consentire alle pagine Web di rimanere reattive mentre eseguono attività lunghe in background.

Il W3C e il WHATWG sono attualmente nel processo di sviluppo della definizione di API per i web worker.^[1]

Panoramica

Come concepiti da WHATWG, i web worker sono relativamente pesanti. Sono intesi per essere longevi, con un costo elevato in termini di prestazioni di avvio e un costo elevato di memoria per istanza.^[1] Di conseguenza non dovrebbero essere utilizzati in grandi quantità, in quanto potrebbero monopolizzare le risorse di sistema.

I web worker consentono l'esecuzione dei thread del browser in concorrenza a uno o più thread JavaScript in esecuzione in background. Normalmente il browser, che segue un singolo thread di esecuzione, deve attendere il completamento dell'esecuzione dei programmi JavaScript prima di procedere e ciò potrebbe richiedere del tempo significativo che il programmatore potrebbe voler nascondere all'utente. I web worker permettono al browser di continuare con le normali operazioni durante l'esecuzione in background dello script.

La specifica web worker è separata dalla specifica HTML5^[3] e può essere utilizzata con HTML5.

Esistono due tipi di web worker:^[1] dedicati e condivisi.

Quando i web worker sono eseguiti in background non hanno accesso diretto al DOM ma comunicano con il documento tramite scambio di messaggi. Ciò consente l'esecuzione multi-thread dei programmi JavaScript.

Caratteristiche

I Web worker interagiscono con il documento principale tramite il passaggio di messaggi. Il codice seguente crea un worker che eseguirà il codice JavaScript nel file specificato.

var worker = new Worker("worker_script.js");

Per inviare un messaggio al worker si usa il metodo postMessage dell'oggetto worker, come mostrato nell'esempio successivo.

worker.postMessage("Hello World!");

La proprietà onmessage usa un event handler per recuperare informazioni da un worker.

worker.onmessage = function(event) {
	alert("Received message " + event.data);
	doSomething();
}
	
function doSomething() {
	//do work
	worker.postMessage("Work done!");
}

worker.terminate();

Una volta che un worker è terminato diventa fuori portata e la variabile che fa riferimento diventa undefined; a questo punto è necessario creare un nuovo worker, se necessario.

Esempio

L'uso più semplice dei web worker è eseguire task computazionalmente costosi senza interrompere l'interfaccia utente.

In questo esempio, il documento principale crea un web worker per computare numeri primi e li mostra progressivamente l'ultimo numero primo trovato.

La pagina principale come segue:

<!DOCTYPE html>
<html>
 <head>
  <title>Worker example: One-core computation</title>
 </head>
 <body>
  <p>il più grande numero primo calcolato fin ora è: <output id="result"></output></p>
  <script>
   var worker = new Worker('worker.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
   };
  </script>
 </body>
</html>

La chiamata al costruttore Worker() crea un web worker e ritorna un oggetto worker , il quale è usato per comunicare con il web worker. L'event handler onmessage dell'oggetto permette al codice di ricevere messaggi dal web worker. Il codice del Web worker, contenuto nel file worker.js, è il seguente:

var n = 1;
var end_value = 10**7;
search: while (n <= end_value) {
  n++;
  for (var i = 2; i <= Math.sqrt(n); i++)
    if (n % i == 0)
      continue search;
  // trovato un numero primo!
  postMessage(n);
}

Per mandare un messaggio alla pagina quando un nuovo numero primo è stato trovato si utilizza il metodo postMessage().

Supporto

Il supporto dei browser per i web worker può essere controllato attraverso la proprietà Worker sull'oggetto globale window,^[4] la quale sarà undefined se il browser non li supporta.

Il seguente codice di esempio controlla il supporto dei web worker su un browser:

function browserSupportsWebWorkers() {
  return typeof window.Worker === "function";
}

I web worker sono attualmente supportati da Chrome, Opera, Internet Explorer (versione 10), Mozilla Firefox e Safari.^[3]^[5] Mobile Safari per iOS supporta i web worker da iOS 5. Il browser Android ha iniziato a supportarli in Android 2.1, ma il supporto è stato rimosso nelle versioni Android 2.2-4.3 prima di essere ripristinato in Android 4.4.^[6]^[7]

Note

^ ^a ^b ^c ^d Web Workers, WHATWG. URL consultato il 3 giugno 2010.
^ HTML Living Standard, su Html.spec.whatwg.org, 30 gennaio 2017. URL consultato il 31 gennaio 2017.
^ ^a ^b "Introducing HTML5", Lawson, B. and Sharp, R., 2011.
^ "HTML5 Up and Running" Mark Pilgrim. O'Reilly/Google Press. August 2010
^ "HTML5 and CSS3" Brian P. Hogan. The Pragmatic Programmers, LLC 2010.
^ Archived copy, su isogenicengine.com. URL consultato il 10 luglio 2011 (archiviato dall'url originale il 19 ottobre 2013).
^ Can I use... Support tables for HTML5, CSS3, etc, su caniuse.com. URL consultato il 10 giugno 2017.