Web worker
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 modifica
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 modifica
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 modifica
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>The highest prime number discovered so far is: <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 Web Worker stesso è 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;
// found a prime!
postMessage(n);
}
Per mandare un messaggio alla pagina quando un nuovo numero primo è stato trovato si utilizza il metodo postMessage().
Supporto modifica
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 modifica
- ^ 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.
Collegamenti esterni modifica
- Web Workers – W3C Archiviato il 7 giugno 2015 in Internet Archive.
- Web Workers – WHATWG
- Using Web Workers Archiviato il 7 maggio 2012 in Internet Archive. – Mozilla Developer Network