Programmierung
Threads für JavaScript
- JavaScript parallel ausführen mit der Web Workers API
- Web Worker terminieren
- Threads für JavaScript
Der Trend ist herstellerübergreifend: Sowohl Intel mit den Intel Atom-Prozessoren N550, D525, D510 und 330, ARM mit ARM Cortex-A9-MPCore und ARM-11-MPCore als auch Apple mit dem A5-Chip für iOS (Dual-Core SGX543MP2) nutzen eine Multicore-Architektur. Mobilgeräte wie Netbooks, Smartphones und Tablets bieten sich für energiesparende Multi-Core-Designs geradezu an und eben in diesem Segment konzentriert sich eine Menge Wachstum.
Mit der Verfügbarkeit von Multi-Core-Designs in webfähigen Geräten praktisch jeder Größe macht es keinen Sinn, Webskripte, die scheinbar ewig auf sich warten lassen, hinzunehmen. Im Idealfall sollte das Betriebssystem die Last automatisch auf die verschiedenen Kerne der Multi-Core-Architektur verteilen. In der Praxis ist dies bei Desktop- Computern nur teilweise der Fall und auch bei Mobilgeräten lässt die Implementierung zu wünschen übrig. Doch kaum ein Flaschenhals wirkt so störend wie ein JavaScript, welches die ganze Webseite blockieren kann. Die Web Workers API in HTML5 kann dieses Problem mit Eleganz entschärfen.Die Web Workers API ist im Übrigen nicht die einzige API, mit der sich parallele Abarbeitung von JavaScript erzielen ließe. Google hatte vor einigen Jahren mit der Google Gears WorkerPool-API für Aufsehen gesorgt. Praktischerweise lieferten die Erfahrungen mit Google Gears praxisnahe Inspiration für die Web Workers API der HTML 5-Spezifikation. Inzwischen wurde die Weiterentwicklung von Google Gears eingestellt. Die Zukunft gehört nun eindeutig HTML 5 und der Web Workers API.
Threads für JavaScript
Zur Ausnutzung der brachliegenden Multi-Core-Technologie durch Multi-Threading in aktuellen Webbrowsern müssen Webentwickler derzeit noch selbst Hand anlegen, indem sie Skripte im Hintergrund ablaufen lassen, ohne Benutzerinteraktionen zu blockieren. Im aktuellen Web Workers Draft (vom 1. Januar 2011) findet sich hierzu folgendes Beispiel. Mittels:
var myWorker = new Worker("./worker.
js");
wird ein neuer Web Worker ins Leben gerufen. Der Browser lädt das Skript aus der JavaScript-Datei worker.js und führt es parallel zur Webseite aus:
var n = 1;
search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i
+= 1)
Aus dem Skript heraus kann nicht auf das Objektmodell der Seite zugegriffen werden (mit nur wenigen Ausnahmen wie setTimeout, setInterval und XMLHttpRequest). Wer auf das DOM der Seite zugreifen möchte, muss die Kommunikation über das myWorker- Objekt aufbauen, zum Beispiel:
<!DOCTYPE html><head><title>Web-Worker-Beispiel</title></head><body><p>Ausgabe einer Primzahl:<output id="ergebnis"></output></p><script type="text/javascript">
var myWorker = new Worker("./worker.
js");
myWorker.onmessage = function (event)
{
document.getElementById("ergebnis").
textContent = event.data;
};</script></html>
Das Skript worker.js muss jetzt Nachrichten an die Webseite senden und wird entsprechend um Folgendes ergänzt:
if (n % i == 0)
continue search;
// Primzahl gefunden!
postMessage(n);
}
So werden Benutzerinteraktionen mit der Webseite nicht durch die im Hintergrund laufende Berechnung belastet.
Die Fähigkeit der WebWorkers API, rechenintensive Berechnungen zu handhaben, lässt sich zum Beispiel mithilfe der Fibonacci-Zahlen-Berechnung unter Beweis stellen. Der hierzu benötigte Quelltext ist aufgrund der rekursiven Berechnungsweise sehr prozessorlastig und eignet sich daher ideal für eine Berechnung im Hintergrund. Die Fibonacci-Zahlenberechnung mittels eines Web Workers (fibonacci.js ) kann zum Beispiel wie folgt implementiert werden:
var results = [];
function resultReceiver(event){
results.push(parseInt(event.data));
if (results.length == 2) {
postMessage(results[0] + results[1]);
}
}
function errorReceiver(event){
throw event.data;
}
onmessage = function(event) {
var n = parseInt(event.data);
if (n == 0 || n == 1) {
postMessage(n);
return;
}
for (var i = 1; i <= 2; i++) {
var worker = new Worker("fibonacci.
js");
worker.onmessage = resultReceiver;
worker.onerror = errorReceiver;
worker.postMessage(n - i);
}
};
Die onmessage-Funktion wird aufgerufen, wenn im HTML-Quelltext der Aufruf post- Message() im Rahmen des Workers ausgeführt wird. Dies löst die Abarbeitung der rekursiven Funktion aus, die immer wieder neue Kopien von sich selbst startet, um die nächste Iterationsstufe der Berechnung auszuführen. Der Worker könnte in den HTML-Quelltext so eingebunden werden:
<!DOCTYPE HTML><html><title>Thread-gestuetzte fibonacci-
Zahlenberechnung</title><body><div id="resultat"></div><script language="javascript">
var worker = new Worker("fibonacci.
js");
worker.onmessage = function(event) {
document.getElementById("result").
textContent = event.data;
dump("Got: " + event.data + "\n");
};
worker.onerror = function(error) {
dump("Worker error: " + error.
message + "\n");
throw error;
};
worker.postMessage("5");</script></body></html>
Die Webseite erzeugt ein div-Element mit der ID resultat. Dieses Element wird genutzt, um das Ergebnis der Berechnung durch den Web Worker anzuzeigen. Danach wird der onmessage-Handler konfiguriert, der die Inhalte des div-Elements setzt. Sollte ein Fehler auftreten, liefert der onerror-Handler eine Fehlermeldung. Zu guter Letzt sendet das Skript eine Mitteilung an den Web Worker unter Verwendung der Methode worker.postMessage().
Unterstützung erkennen
Damit sich die Web Workers API auf breiter Front durchsetzen kann, bedarf es standardkonformer Webbrowser. Zum Glück liefern sich Google Chrome, Mozilla Firefox, Apple Safari und der IE9 um die W3C- und WHATWG-Konformität ein Kopf-an-Kopf- Rennen. Microsoft wäre sogar in der Lage, mit dem IE 9 die sprichwörtlichen alten IE6-Zöpfe abzuschneiden und neue Webstandards auch in der eher innovationsresistenten Unternehmens-IT durchzusetzen.Die Unterstützung der Web Workers API durch den Webbrowser lässt sich zum Glück vorab abfragen. Ist die Unterstützung durch den Browser gewährleistet, ist eine Worker-Eigenschaft auf dem globalen window-Objekt - window.Worker - gesetzt. Andernfalls ist diese Eigenschaft undefiniert, was sich wie folgt ermitteln ließe:
function supports_web_workers()
{
return !!window.Worker;
}
Anstatt diese Funktion selbst zu implementieren, können Sie die Verfügbarkeit der Unterstützung für die Web Workers API mithilfe der JavaScript-Bibliothek Modernizer (aktuell in der Version 1.6) in Erfahrung bringen:
if (Modernizr.webworkers)
{
// window.Worker ist verfuegbar
} else
{
// keine native Unterstuetzung fuer
Web Workers vorhanden
}
Potenzial für Missbrauch
Zu den ersten praktischen Anwendungen für Web Workers zählt ein quelloffenes Projekt namens Really Cloudy (www.theplanis.com/clouds/ ). Hierbei handelt es sich um JavaScript-Code, welcher Website-Betreibern erlauben soll, von den Besuchern ihrer Websites kostenlos Rechenzeit zu entleihen. Die aktuelle Spezifikation der Web Workers API limitiert zwar die Zugriffe auf einen Web Worker durch Skripte auf dieselbe Domain. Die erzwingt jedoch nicht, dass die Betreiber der Skripte die Zustimmung eines Benutzers einholen, bevor sie die Rechenzeit seines Computers beanspruchen können. Inwieweit sich hierdurch eine Tür für ernsthaften Missbrauch eröffnet und wie schnell die Browser- Hersteller Schutzmechanismen nachliefern, bleibt offen.
Fazit
Die Web Workers API in HTML 5 erlaubt das Parallelisieren der Abarbeitung von JavaScript. Rechenzeitintensive Aufgaben wie komplexe mathematische Berechnungen, Netzwerkzugriffe oder Zugriffe auf HTML5-konformen Offline-Speicher können nun in separaten Threads ausgeführt werden, ohne die Interaktionen des Benutzers mit der Ursprungsseite zu beeinträchtigen.
