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
modificaCome 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
modificaI 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
modificaL'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
modificaIl 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
