Web Workers API

Web Workers ermöglichen es, eine Skriptoperation in einem Hintergrund-Thread auszuführen, der vom Hauptausführungsthread einer Webanwendung getrennt ist. Der Vorteil hierbei ist, dass umfangreiche Verarbeitungen in einem separaten Thread durchgeführt werden können, sodass der Hauptthread (normalerweise die Benutzeroberfläche) ohne Blockierung oder Verlangsamung ausgeführt werden kann.

Konzepte und Nutzung von Web Workers

Ein Worker ist ein Objekt, das mithilfe eines Konstruktors erstellt wird (z. B. Worker()), der eine benannte JavaScript-Datei ausführt — diese Datei enthält den Code, der im Worker-Thread ausgeführt wird.

Zusätzlich zu der Standardmenge an JavaScript-Funktionen (wie String, Array, Object, JSON, etc.) können Sie fast jeden Code, den Sie mögen, innerhalb eines Worker-Threads ausführen. Es gibt einige Ausnahmen: Zum Beispiel können Sie das DOM nicht direkt von innerhalb eines Workers manipulieren oder einige Standardmethoden und -eigenschaften des Window-Objekts verwenden. Informationen über den Code, den Sie verwenden können, finden Sie unten unter globaler Kontext und Funktionen von Workern und unterstützte Web-APIs.

Daten werden zwischen Workern und dem Hauptthread über ein Nachrichtensystem gesendet — beide Seiten senden ihre Nachrichten mittels der postMessage()-Methode und reagieren auf Nachrichten über den onmessage-Ereignishandler (die Nachricht ist innerhalb der message-Eigenschaft data enthalten). Die Daten werden kopiert anstatt geteilt.

Worker können ihrerseits neue Worker erzeugen, solange diese Worker innerhalb der gleichen Origin wie die übergeordnete Seite gehostet werden.

Zusätzlich können Worker Netzwerk-Anfragen mit den APIs fetch() oder XMLHttpRequest durchführen (beachten Sie jedoch, dass das Attribut responseXML von XMLHttpRequest immer null sein wird).

Typen von Workern

Es gibt mehrere verschiedene Arten von Workern:

  • Dedizierte Worker sind Worker, die von einem einzigen Skript genutzt werden. Dieser Kontext wird durch ein DedicatedWorkerGlobalScope-Objekt dargestellt.
  • Gemeinsame Worker sind Worker, die von mehreren Skripten genutzt werden können, die in verschiedenen Fenstern, IFrames usw. ausgeführt werden, solange sie sich im gleichen Domainbereich wie der Worker befinden. Sie sind etwas komplexer als dedizierte Worker — Skripte müssen über einen aktiven Port kommunizieren.
  • Service Worker fungieren im Wesentlichen als Proxy-Server, die zwischen Webanwendungen, dem Browser und dem Netzwerk (sofern verfügbar) sitzen. Unter anderem sollen sie die Erstellung effektiver Offline-Erlebnisse ermöglichen, Netzwerk-Anfragen abfangen und je nach Verfügbarkeit des Netzwerks geeignete Maßnahmen ergreifen, sowie Ressourcen auf dem Server aktualisieren. Sie ermöglichen auch den Zugriff auf Push-Benachrichtigungen und Hintergrund-Synchronisations-APIs.

Hinweis: Laut der Web Workers Spezifikation sollten Worker-Fehlerereignisse nicht nach oben durchgereicht werden (siehe Firefox Fehler 1188141). Dies wurde in Firefox 42 implementiert.

Worker globale Kontexte und Funktionen

Worker laufen in einem anderen globalen Kontext als das aktuelle window! Während Window nicht direkt für Worker verfügbar ist, sind viele der gleichen Methoden in einem gemeinsamen Mixin (WindowOrWorkerGlobalScope) definiert und für Worker durch ihre eigenen von WorkerGlobalScope abgeleiteten Kontexte verfügbar gemacht:

Einige der Funktionen (eine Teilmenge), die allen Workern und dem Hauptthread gemeinsam sind (aus WindowOrWorkerGlobalScope), sind:

Die folgenden Funktionen sind nur für Worker verfügbar:

Unterstützte Web-APIs

Hinweis: Wenn eine aufgelistete API auf einer Plattform in einer bestimmten Version unterstützt wird, kann im Allgemeinen davon ausgegangen werden, dass sie in Webarbeitern verfügbar ist. Sie können die Unterstützung für ein bestimmtes Objekt/eine bestimmte Funktion auch unter https://worker-playground.glitch.me/ testen.

Die folgenden Web-APIs sind für Worker verfügbar:

Worker können auch andere Worker erzeugen, daher sind diese APIs ebenfalls verfügbar:

Web Worker Schnittstellen

Worker

Repräsentiert einen laufenden Worker-Thread und ermöglicht es Ihnen, Nachrichten an den laufenden Worker-Code zu übermitteln.

WorkerLocation

Definiert den absoluten Standort des vom Worker ausgeführten Skripts.

SharedWorker

Repräsentiert eine spezielle Art von Worker, auf die von mehreren Browsing-Kontexten (d. h. Fenster, Tabs oder IFrames) oder sogar anderen Workern zugegriffen werden kann.

WorkerGlobalScope

Repräsentiert den generischen Gültigkeitsbereich eines jeden Workers (erfüllt die gleiche Funktion wie Window für normale Webinhalte). Unterschiedliche Arten von Workern haben Gültigkeitsbereichsobjekte, die von dieser Schnittstelle erben und spezifischere Funktionen hinzufügen.

DedicatedWorkerGlobalScope

Repräsentiert den Gültigkeitsbereich eines dedizierten Workers, der von WorkerGlobalScope erbt und einige dedizierte Funktionen hinzufügt.

SharedWorkerGlobalScope

Repräsentiert den Gültigkeitsbereich eines gemeinsamen Workers, der von WorkerGlobalScope erbt und einige dedizierte Funktionen hinzufügt.

WorkerNavigator

Repräsentiert die Identität und den Zustand des User-Agents (des Clients).

Beispiele

Wir haben einige Demos erstellt, um die Nutzung von Web Workern zu zeigen:

Weitere Informationen darüber, wie diese Demos funktionieren, finden Sie in Using Web Workers.

Spezifikationen

Specification
HTML Standard
# workers

Siehe auch