HTML5-JavaScript APIs: Website-Trinity
Kommentare

Web Workers
Nutzen Sie konsequent die Möglichkeit, mit JavaScript Logik auf Clientseite umzusetzen, werden Sie früher oder später auf ein Problem stoßen: Sobald eine Operation in JavaScript umfangreicher

Web Workers

Nutzen Sie konsequent die Möglichkeit, mit JavaScript Logik auf Clientseite umzusetzen, werden Sie früher oder später auf ein Problem stoßen: Sobald eine Operation in JavaScript umfangreicher wird, kann es passieren, dass der Browser Ihres Nutzers langsamer bis überhaupt nicht mehr reagiert. Mit dem Web-Workers-Feature können Sie derartige Operationen allerdings aus dem direkten Browserkontext herauslösen, die Berechnung separat durchführen und das Ergebnis in den Browser zurücklaufen lassen.

Als konkretes Beispiel für die Anwendung von Web-Workers sehen Sie nun, wie Sie Primzahlen in einem Worker berechnen können und das Ergebnis in den Haupt-Thread zurückliefern und diese dort anzeigen. Mehr dazu in Listing 7.

Listing 7: Web-Workers

    Höchste Primzahl: 

     

// prime.js
var i, n = 1, results = 1;
outerLoop: while (true) {
    n += 1;
    for (i = 2; i 

Der Start eines Workers ist relativ einfach. Sie müssen lediglich ein neues Objekt vom Typ Worker mithilfe des new-Operators erzeugen. Außerdem müssen Sie dem Konstruktor den Namen der Datei mitgeben, die den Quellcode enthält, der im Worker ausgeführt werden soll. Mit dem neu erstellten Worker-Objekt können Sie dann weiterarbeiten. Es besitzt eine Eigenschaft mit dem Namen onmessage. Diese Eigenschaft akzeptiert als Wert eine Callback-Funktion, die ausgeführt wird, sobald der Worker Daten sendet. Im Falle des Primzahlenbeispiels ist dies jeweils die gefundene Primzahl. Die Callback-Funktion erhält als Argument ein Objekt, in dessen data-Eigenschaft die Nachricht des Workers enthalten ist.

Der Worker wiederum kann mit dem Haupt-Thread kommunizieren, indem die Methode self.postMessage ausgeführt wird. Dieser Methode können Sie eine Zeichenkette oder ein JSON-Objekt übergeben, auf die Sie dann, wie bereits erwähnt, über data zugreifen können.

Die Kommunikation ist allerdings nicht nur unidirektional vom Worker in den Haupt-Thread möglich. Auch der Haupt-Thread kann nach dem Start aktiv mit dem Worker kommunizieren. Auch hier steht Ihnen die Methode postMessage zur Verfügung, die Sie auf dem Worker-Objekt aufrufen können. Auf der anderen Seite können Sie im Worker mit self.onmessage wiederum eine Callback-Funktion registrieren, mit der Sie auf eingehende Nachrichten vom Haupt-Thread reagieren können.

Den Workerprozess können Sie auch aktiv wieder beenden, indem Sie die terminate-Methode aufrufen. Sie können diese Methode sowohl aus dem Haupt-Thread auf dem Worker-Objekt als auch aus dem Worker direkt über den Aufruf von self.terminate ausführen.

Mit diesen Methoden können Sie eine Infrastruktur schaffen, in der Sie die meisten ressourcenintensiven Berechnungen nicht mehr im Haupt-Thread durchführen müssen, sondern mit den Worker-Threads die Möglichkeit haben, potenziell blockierende Operationen aus diesem Kontext herauszulösen. Durch die Möglichkeit in beide Richtungen zu kommunizieren, also sowohl vom Worker als auch vom Haupt-Thread aus initiiert, ist es auch nicht notwendig, einen Worker nach einer Berechnung wieder zu beenden. Der Worker läuft parallel weiter und der Haupt-Thread kann bei Bedarf eine neue Berechnung durch das Versenden einer Nachricht anstoßen.

Fazit

Wie sieht die Realität in Bezug auf die JavaScript-APIs aus? Das größte Problem mit HTML5 und auch mit den hier behandelten JavaScript-APIs ist, dass diese nicht von allen Browsern unterstützt werden. Haben Sie eine kontrollierte Umgebung, in der Sie wissen, welche Browser auf Ihre Applikation zugreifen, können Sie auch moderne Features gefahrlos nutzen. Ist dies nicht der Fall, müssen Sie auf jeden Fall dafür sorgen, dass Ihre Applikation für sämtliche Nutzer verwendbar ist. Im Endeffekt müssen Sie, wenn Sie möglichst viele verschiedene Browser unterstützen wollen, Weichen in Ihre Applikation einbauen. Sie sorgen einerseits dafür, dass die Objekte, die die Schnittstellen bieten, gleichgeschaltet werden, so heißt IndexedDB beispielsweise in Firefox-Browsern „mozIndexedDB“ und in Chrome „webkitIndexedDB“. Mit einer einfachen Zeile Quellcode, die Sie in Listing 8 sehen können, können Sie dafür sorgen, dass Ihnen unter indexedDB browserübergreifend diese Funktionalität zur Verfügung steht:

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

Der zweite Effekt einer derartigen Weiche ist, dass Browser, die diese Features nicht unterstützen, entweder eine Fehlermeldung ausgeben oder eine andere, vergleichbare Funktionalität verwenden.

Sebastian Springer arbeitet seit mehreren Jahren beim PHP-Dienstleister Mayflower in München und ist dort derzeit als Projekt-und Teamleiter tätig. Dabei liegt sein Fokus auf der Entwicklung und Qualitätssicherung von dynamischen Webapplikationen mit JavaScript und PHP.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -