Web Workers API

Web Workers ermöglichen es, eine Skriptoperation in einem Hintergrund-Thread auszuführen, der vom Haupt-Execution-Thread einer Webanwendung getrennt ist. Der Vorteil hierbei ist, dass aufwendige Verarbeitung in einem separaten Thread durchgeführt werden kann, sodass der Haupt-Thread (gewöhnlich die Benutzeroberfläche) ohne Blockierung/Verlangsamung laufen kann.

Konzepte und Nutzung

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

Zusätzlich zu den Standard-Funktionen von JavaScript (wie String, Array, Object, JSON usw.) können Sie fast jeden gewünschten Code innerhalb eines Worker-Threads ausführen. Es gibt einige Ausnahmen: Zum Beispiel können Sie nicht direkt das DOM innerhalb eines Workers 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 zwischen Workern und dem Haupt-Thread über ein Nachrichtensystem gesendet – beide Seiten senden ihre Nachrichten mit der postMessage()-Methode und antworten auf Nachrichten über den onmessage-Ereignishandler (die Nachricht ist innerhalb der data-Eigenschaft des message-Ereignisses enthalten). Die Daten werden kopiert anstatt geteilt.

Worker können wiederum neue Worker erstellen, solange diese Worker innerhalb desselben Ursprungs wie die übergeordnete Seite gehostet sind.

Darüber hinaus können Worker Netzwerkanfragen unter Verwendung der fetch()- oder XMLHttpRequest-APIs stellen (obwohl zu beachten ist, dass das responseXML-Attribut von XMLHttpRequest immer null sein wird).

Workertypen

Es gibt verschiedene Arten von Workern:

  • Dedizierte Worker sind Worker, die von einem einzelnen Skript genutzt werden. Dieser Kontext wird durch ein DedicatedWorkerGlobalScope-Objekt repräsentiert.
  • Geteilte Worker sind Worker, die von mehreren Skripten genutzt werden können, die in verschiedenen Fenstern, IFrames usw. laufen, solange sie sich in derselben 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 (falls verfügbar) sitzen. Sie sollen unter anderem die Erstellung effektiver Offline-Erfahrungen ermöglichen, Netzwerkanfragen abfangen und je nach Verfügbarkeit des Netzwerks entsprechende Maßnahmen ergreifen sowie Assets auf dem Server aktualisieren. Sie ermöglichen auch den Zugriff auf Push-Benachrichtigungen und Hintergrund-Synchronisierungs-APIs.

Worker-Kontexte

Obwohl Window Arbeitern nicht direkt zur Verfügung steht, sind viele der gleichen Methoden in einem gemeinsamen Mixin (WindowOrWorkerGlobalScope) definiert und Arbeitern durch ihre eigenen, von WorkerGlobalScope abgeleiteten Kontexte verfügbar gemacht:

Schnittstellen

Worker

Stellt einen laufenden Worker-Thread dar, der es Ihnen ermöglicht, Nachrichten an den laufenden Workercode zu senden.

WorkerLocation

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

SharedWorker

Stellt einen speziellen Typ von Worker dar, der von mehreren Browsing-Kontexten (d. h. Fenstern, Tabs oder IFrames) oder sogar anderen Workern genutzt werden kann.

WorkerGlobalScope

Stellt den generischen Geltungsbereich eines jeden Workers dar (erfüllt die gleiche Rolle wie Window für normale Webinhalte). Verschiedene Workertypen haben Geltungsbereich-Objekte, die von diesem Interface erben und spezifischere Funktionen hinzufügen.

DedicatedWorkerGlobalScope

Stellt den Geltungsbereich eines dedizierten Workers dar, der von WorkerGlobalScope erbt und einige dedizierte Funktionen hinzufügt.

SharedWorkerGlobalScope

Stellt den Geltungsbereich eines geteilten Workers dar, der von WorkerGlobalScope erbt und einige dedizierte Funktionen hinzufügt.

WorkerNavigator

Stellt die Identität und den Zustand des User-Agents (des Clients) dar.

Beispiele

Wir haben ein paar Demos erstellt, um die Verwendung von Web Workern zu zeigen:

Weitere Informationen darüber, wie diese Demos funktionieren, finden Sie in Verwendung von Web Workern.

Spezifikationen

Specification
HTML Standard
# workers

Siehe auch