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