Web Workers API

Web Workers ermöglichen es, einen Skriptvorgang in einem Hintergrund-Thread auszuführen, der vom Hauptausführungsthread einer Webanwendung getrennt ist. Der Vorteil dabei ist, dass aufwändige Verarbeitungen in einem separaten Thread durchgeführt werden können, wodurch der Hauptthread (in der Regel die Benutzeroberfläche) ohne Blockierungen oder Verlangsamungen weiterlaufen kann.

Konzepte und Nutzung

Ein Worker ist ein Objekt, das mit einem Konstruktor (z. B. Worker()) erstellt wird und eine benannte JavaScript-Datei ausführt – diese Datei enthält den Code, der im Worker-Thread läuft.

Zusätzlich zu den Standardfunktionen von JavaScript (wie String, Array, Object, JSON usw.) kann fast jeder Code, den Sie möchten, in einem Worker-Thread ausgeführt werden. Es gibt einige Ausnahmen: Beispielsweise kann man das DOM nicht direkt von einem Worker aus manipulieren oder einige Standardmethoden und -eigenschaften des Window-Objekts verwenden. Informationen über den Code, den Sie ausführen können, finden Sie unter unterstützte Funktionen und unterstützte Web-APIs.

Daten werden über ein Nachrichtensystem zwischen Workern und dem Hauptthread gesendet – beide Seiten senden ihre Nachrichten mit der postMessage()-Methode und reagieren auf Nachrichten über den onmessage-Event-Handler (die Nachricht ist in der data-Eigenschaft des message-Events enthalten). Die Daten werden dabei kopiert und nicht geteilt.

Arbeitsprozesse können wiederum neue Worker erzeugen, solange diese Worker innerhalb des gleichen Ursprungs wie die übergeordnete Seite gehostet werden.

Zusätzlich können Worker Netzwerkanfragen mit den APIs fetch() oder XMLHttpRequest machen (obwohl zu beachten ist, dass das Attribut responseXML von XMLHttpRequest immer null sein wird).

Worker-Typen

Es gibt verschiedene Arten von Workern:

  • Dedizierte Worker sind Worker, die von einem einzigen Skript genutzt werden. Dieser Kontext wird durch ein DedicatedWorkerGlobalScope-Objekt dargestellt.
  • Geteilte Worker sind Worker, die von mehreren Skripten verwendet werden können, die in verschiedenen Fenstern, IFrames usw. ausgeführt werden, solange sie sich im selben Domain 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 (wenn verfügbar) sitzen. Sie sind unter anderem dazu gedacht, effektive Offline-Erfahrungen zu schaffen, Netzwerkanfragen abzufangen und basierend darauf, ob das Netzwerk verfügbar ist, angemessene Maßnahmen zu ergreifen und auf dem Server befindliche Ressourcen zu aktualisieren. Sie ermöglichen auch den Zugriff auf Push-Benachrichtigungen und Background-Sync-APIs.

Worker-Kontexte

Während Window für Worker nicht direkt verfügbar ist, sind viele der gleichen Methoden in einem geteilten Mix-In (WindowOrWorkerGlobalScope) definiert und durch ihre eigenen von WorkerGlobalScope abgeleiteten Kontexte für Worker verfügbar gemacht:

Schnittstellen

Worker

Stellt einen laufenden Worker-Thread dar, mit dem Sie Nachrichten an den laufenden Worker-Code senden können.

WorkerLocation

Definiert die absolute Position des von dem Worker ausgeführten Skripts.

SharedWorker

Repräsentiert eine spezielle Art von Worker, die von mehreren Browsing-Kontexten (d.h. Fenstern, Tabs oder IFrames) oder sogar anderen Workern aus zugänglich ist.

WorkerGlobalScope

Stellt den generischen Umfang eines jeden Workers dar (erfüllt die gleiche Aufgabe wie Window für normale Webinhalte). Verschiedene Arten von Workern haben Bereichsobjekte, die von dieser Schnittstelle erben und spezifischere Funktionen hinzufügen.

DedicatedWorkerGlobalScope

Repräsentiert den Bereich eines dedizierten Workers, der von WorkerGlobalScope erbt und einige spezielle Funktionen hinzufügt.

SharedWorkerGlobalScope

Repräsentiert den Bereich eines geteilten Workers, der von WorkerGlobalScope erbt und einige spezielle 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 unter Verwendung von Web Workern.

Spezifikationen

Specification
HTML
# workers

Siehe auch