Anzeige
Anzeige
UX & Design
Artikel merken

Multithreading in JavaScript: So funktionieren Web-Worker

JavaScript ist single-threaded? Nicht ganz. Web-Worker lassen dich komplexe Teilaufgaben an separate Threads auslagern und so die Performance deiner App steigern. Wir zeigen dir, wie du diese Worker nutzt!

Von Ilja Zaglov
3 Min. Lesezeit
Anzeige
Anzeige

Die Sklaven der IT-Welt.

JavaScript ist dafür bekannt, dass alle Befehle sequentiell ausführt werden – und das single-threaded. Das bedeutet, dass bei der Entwicklung von JavaScript-Anwendungen und Websites nur ein CPU-Kern für die Ausführung des Codes zur Verfügung steht. Mit einem als Web-Worker bezeichneten Feature ist es möglich, JavaScript auf mehrere CPU-Kerne zu verteilen, was in diesem Fall die Auslagerung komplexer Operationen an einen separaten Thread bedeutet.

Anzeige
Anzeige

Mit Hilfe von Techniken wie setTimeout() und setInterval() sowie XHR-Requests lässt sich zwar eine Parallelität erzielen, sodass mehrere Operationen durchgeführt werden können, ohne einander zu blockieren. Diese Aufgaben werden aber weiterhin sequentiell – also nacheinander – im Event-Loop des Browsers abgearbeitet.

Web-Worker: Multithreading für JavaScript

Mit Web-Workern kannst du ein rechenintensives Skript ausführen, ohne die Ausführung anderer Skripte, die beispielsweise auf Benutzerinteraktionen reagieren, zu behindern. Die Applikation friert nicht ein und die Benutzer haben nicht mehr mit Fehlermeldungen wie „Ein Skript auf dieser Webseite braucht zu lange für die Ausführung“ zu kämpfen.

Anzeige
Anzeige

So kann trotz komplexer Aufgaben eine leistungsstarke und reaktionsschnelle Oberfläche für JavaScript-Anwendungen realisiert werden.

Anzeige
Anzeige

So setzt du Web-Worker ein

Web-Worker werden in einem isolierten Thread ausgeführt und müssen in einer separaten Datei angelegt werden. Um einen Web-Worker erzeugen zu können, benötigst du zunächst ein Worker-Objekt.

var worker = new Worker('worker.js');

Sofern die angegebenen Datei vorhanden ist, erzeugt der Browser einen neuen Worker-Thread.

Anzeige
Anzeige

Mit der postMessage()-Methode startest du den Web-Worker.

worker.postMessage();

Kommunikation zwischen Web-Worker und Applikation

Die Kommunikation zwischen dem Web-Worker und der Hauptapplikation erfolgt über die postMessage()-Methode und „Event-Listener“. Je nach Browser akzeptiert der Web-Worker eine einfache Zeichenfolge oder ein JSON-Objekt.

Das nachfolgende Beispiel zeigt, wie eine Kommunikation zwischen Web-Worker und Applikation stattfinden kann:

Anzeige
Anzeige
var worker = new Worker('doWork.js');
worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.data);
}, false);
worker.postMessage('Hello World'); // Send data to our worker.

Code des Workers:

self.addEventListener('message', function(e) {
self.postMessage(e.data);
}, false);

Ein wenig abgewandelt, funktioniert das Beispiel auch mit der Übergabe von JSON-Objekten.

var worker = new Worker('worker.js');
worker.addEventListener('message', function(e) {
console.log(e.data);
}, false);
worker.postMessage({'cmd': 'TEST', 'msg': 'Hallo Welt'}); // Send data to our worker.
self.addEventListener('message', function(e) {
self.postMessage("Command: "+e.data.cmd);
self.postMessage("Message: "+e.data.msg);
}, false);

Einschränkungen für Web-Worker

Da Web-Worker parallel zum Hauptskript ausgeführt werden, haben sie keinen Zugriff auf die folgenden Funktionen von JavaScript.

Anzeige
Anzeige
  • DOM
  • window-Objekt
  • document-Objekt
  • parent-Objekt

Weiterhin zur Verfügung stehen:

  • navigator-Objekt
  • location-Objekt
  • XMLHttpRequests
  • setTimeout()-Methode
  • setInterval()-Methode
  • clearTimeout()-Methode
  • clearInterval()-Methode
  • importScripts()-Funktion
  • Das Erzeugen weiterer Web-Worker

Externe Skripte und untergeordnete Web-Worker

Mit der importScripts()-Funktion können innerhalb von Web-Workern externe Skripte dazugeladen werden. Mehrere Skripte können mit Hilfe eines Kommas voneinander getrennt werden.

importScripts('script1.js');
importScripts('script2.js');
importScripts('script1.js','script2.js');

Neben dem Import externer Skripte sind Web-Worker auch in der Lage, Sub-Web-Worker zu erzeugen und so weitere Threads für verschiedene Aufgaben zu nutzen. Wie das funktioniert, kannst du in der Web-Worker-Spezifikation nachlesen.

Anzeige
Anzeige

Anwendungsfälle für Web-Worker

Zwar wird die Leistungsfähigkeit moderner JavaScript-Engines immer besser, irgendwann stoßen aber auch die besten Engines an ihre Grenzen. Web-Worker weiten die technischen Beschränkungen von JavaScript aus und machen parallele Verarbeitung möglich. Mögliche Einsatzszenarien für Web-Worker sind Echtzeitanwendung die zum Zeitpunkt der Benutzereingabe tätig werden – zum Beispiel eine Rechtschreibprüfung oder andere Methoden zur Textverarbeitung.

Auch für das Vorladen und Vorverarbeiten von Daten, die zu einem späteren Zeitpunkt in einer Applikation benötigt werden, sind Web-Worker eine leistungsstarke Methode. Sie eignen sich aber auch für jegliche weitere komplexe Rechenarbeiten, die beispielsweise bei der Arbeit mit Bildern, Video und Ton anfallen können.

Einige Beispiele für Web-Worker findest du hier:

Anzeige
Anzeige

Weitere Informationen zur Web-Worker-Spezifikation gibt es hier:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
3 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Simon H.

Hallo,

danke für den Artikel.
Zwei kleine Fehler haben sich eingeschlichen :)

Im ersten Bereich ist setTImeout falsch, großes I muss kleines i sein.

Im dritten Bereich stimmen die Apostroph nicht: var worker = new Worker(‚worker.js‘); richtig ist: var worker = new Worker(‚worker.js‘);

Für die Entwicklung ist es sehr wichtig, dass solche Sachen richtig geschrieben werden.

Gruß

Antworten
Ilja Zaglov

Hallo Simon,

danke für den Hinweis. Habe das mal korrigiert.

Viele Grüße
Ilja

Antworten
Waldemar Enns

Hallo zusammen,

Danke für den netten Artikel. Ist zwar schon ein halbes Jahrzehnt her, aber ich denke es könnte sich lohnen auf den folgenden Artikel zu verweisen:
https://dassur.ma/things/is-postmessage-slow/

Da geht es um die Frage, ob postMessage langsam ist, warum es das manchmal sein kann (Stichwort: serializing) und wie man dieses Problem beheben kann (bspw. chunking).

LG,
Waldemar

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige