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:
DedicatedWorkerGlobalScope
für dedizierte WorkerSharedWorkerGlobalScope
für geteilte WorkerServiceWorkerGlobalScope
für Service Worker
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. -
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. -
Stellt den Geltungsbereich eines geteilten Workers dar, der von
WorkerGlobalScope
erbt und einige dedizierte Funktionen hinzufügt. -
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:
- Grundlegendes Beispiel für einen dedizierten Worker (dedizierten Worker ausführen).
- Grundlegendes Beispiel für einen geteilten Worker (geteilten Worker ausführen).
- OffscreenCanvas Worker Beispiel (OffscreenCanvas Worker ausführen).
Weitere Informationen darüber, wie diese Demos funktionieren, finden Sie in Verwendung von Web Workern.
Spezifikationen
Specification |
---|
HTML Standard # workers |
Siehe auch
- Verwendung von Web Workern
Worker
SchnittstelleSharedWorker
Schnittstelle- Service Worker API