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. I web worker sono spesso in grado di utilizzare le CPU multi-core in modo più efficiente.

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.

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. 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 e può essere utilizzata con HTML5.

Esistono due tipi di web worker: 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:

{ window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Mobile-friendly input handler for Enter key document.addEventListener('keyup', function(e) { if (e.key === 'Enter') { const searchInput = e.target.closest('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { e.preventDefault(); const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Search button click handler document.addEventListener('click', e => { const searchButton = e.target.closest('#searchButton, .search-button, .cdx-search-input__end-button, .header-search, .search-icon, [type="submit"]'); if (searchButton) { e.preventDefault(); const searchForm = searchButton.closest('form'); if (searchForm) { const searchInput = searchForm.querySelector('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } } }); }); \n\n"}}">

<!DOCTYPE html>
<html>
 <head>
  <title>Worker example: One-core computation</title>
 </head>
 <body>
  <p>il più grande numero primo calcolato finora è: <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, 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 10, Mozilla Firefox e Safari. 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.

Collegamenti esterni

• Web Workers – W3C Archiviato il 7 giugno 2015 in Internet Archive.
• Web Workers – WHATWG, su whatwg.org.
• Using Web Workers Archiviato il 7 maggio 2012 in Internet Archive. – Mozilla Developer Network