Web Worker API
Web Workers ermöglichen Entwicklern Skripte in einem Hintergrundthread getrennt vom Haupthread auszuführen. Dies hat den Vorteil, dass rechenintensive Operationen in einem gesonderten Thread ausgeführt werden können und somit der Hauptthread, der für gewöhnlich das UI bereitstellt, arbeiten kann ohne verlangsamt oder blockiert zu werden.
Web Workers Konzepte und Anwendung
Ein Worker ist ein Objekt das mit einem Konstruktor erzeugt wird (beispielsweise Worker()
) und eine JavaScript Datei mit Namen ausführt. In dieser Datei ist der Code enthalten der im Worker-Thread ausgeführt wird. Worker arbeiten in einem eigenen globalen Kontext, der vom aktuellen Hauptkontext window
verschieden ist. Dieser Kontext ist durch das Objekt DedicatedWorkerGlobalScope
repräsentiert, falls es sich um einen dedizierten Worker handelt (also einen Worker der nur von einem Skript genutzt wird, was der Standard ist.). Shared Workers benutzen das Objekt SharedWorkerGlobalScope
.
Man kann bis auf einige Ausnahmen beliebige Anweisungen ausführen. Beispielsweise kann man das DOM nicht direkt ändern und auch einige Standardmethoden und -attribute von window
können nicht genutzt werden. Viele andere Elemente von window
können allerdings schon genutzt werden, unter anderem WebSockets und Datenspeicher, wie IndexedDB und die Firefox-OS-only Data Store API. Unter Functions and classes available to workers finden Sie mehr Details.
Daten werden zwischen den Workern und dem Hauptthread mithilfe eines Nachrichtensystems verschickt — beide Seiten verschicken ihre Nachrichten mit der postMessage()
Methode und antworten mit dem onmessage
Event Handler (die empfangene Nachricht ist im data
Attribut Message
des Events enthalten). Die Daten werden kopiert und nicht geteilt.
Worker können neue Worker erzeugen, solange diese vom selben Ursprung gehosted werden wie die Ursprungsseite. Außerdem können Worker XMLHttpRequest
für Netzwerk I/O benutzen mit der Ausnahme, dass die responseXML
und channel
Attribute von XMLHttpRequest
stets null
zurückgeben.
Neben dedizierten Workern gibt es noch andere Typen:
- Shared (geteilte) Worker können von mehreren Skripten, die auch in unterschiedlichen Fenstern, IFrames, etc. laufen genutzt werden, solange sie alle in der selben Domain arbeiten. Sie sind etwas komplizierter als dedizierte Worker — Skripte müssen über einen aktiven Port kommunizieren. Unter
SharedWorker
finden Sie mehr Details. - ServiceWorker arbeiten als Proxy Server zwischen Webanwendungen, dem Browser und dem Netzwerk. Sie sollen (zusammen mit anderen Technologien) das Erstellen von effektiven offline-Anwendungen ermöglichen, Netzwerkabfragen abfangen und je nach Verfügbarkeit einer Netzwerkverbindung ensprechend reagieren und den Server über Änderungen informieren. Zudem erlauben sie Push-Benachrichtigungen zu senden und im Hintergrund APIs zu synchronisieren.
- Chrome Worker ist ein Firefox-only Workertyp für die Add-On Entwicklung mit Zugriff auf js-ctypes in Ihrem Worker. Unter
ChromeWorker
finden Sie weitere Informationen. - Audio Worker bieten die Möglichkeit Audioverarbeitung mit Skripten in einem Worker auszuführen.
Note: As per the Web workers Spec, worker error events should not bubble (see Bug 1188141. This has been implemented in Firefox 42.
Web Worker interfaces
AbstractWorker
- Abstrakte Attribute und Methoden für alle Worker (z.B.
Worker
oderSharedWorker
). Worker
- Repräsentiert einen laufenden Workerthread. Erlaubt das Senden von Nachrichten an den Code im Worker.
WorkerLocation
- Definiert die absolute Quelle des Skripts das im
Worker
ausgeführet wird.
SharedWorker
- Repräsentiert einen speziellen Worker, auf den von verschiedenen Fenstern, IFrames oder sogar Workern zugegrifffen werden kann.
WorkerGlobalScope
- Repräsentiert den generischen Scope jedes Workers (dies entspricht dem
Window
objekt für normale Webinhalte). Andere Worker haben Scopes die von diesem vererbt werden und spezifische Eigenschaften hinzufügen. DedicatedWorkerGlobalScope
- Repräsentiert den von
WorkerGlobalScope
vererbten Scope eines dedizierten Workers. Fügt besondere Eigenschaften hinzu. SharedWorkerGlobalScope
- Repräsentiert den von
WorkerGlobalScope
vererbten Scope eines Shared Workers. Fügt besondere Eigenschaften hinzu. WorkerNavigator
- Repräsentiert die Identität und den Zustand des User Agents (dem client).
Beispiele
Sie finden ein paar einfache Beispiele, die die Benutzung veranschaulichen unter diesen Links:
- Basic dedicated worker example (run dedicated worker).
- Basic shared worker example (run shared worker).
Unter Using web workers finden Sie mehr Informationen wie diese Demos funktionieren.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard | Lebender Standard |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 4 | (Ja) | 3.5 (1.9.1) | 10.0 | 10.6 | 4 |
Shared workers | 4 | Nicht unterstützt | 29 (29) | Nicht unterstützt | 10.6 | 4 |
Passing data using structured cloning | 13 | (Ja) | 8 (8) | 10.0 | 11.5 | 6 |
Passing data using transferable objects | 17 webkit 21 |
Nicht unterstützt | 18 (18) | Nicht unterstützt | 15 | 6 |
Global URL |
10[1] 23 |
(Ja) | 21 (21) | 11 | 15 | 6[1] |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | 4.4 | 4 | (Ja) | 1.0 (1.9.1) | 1.0.1 | 10.0 | 11.5 | 5.1 |
Shared workers | Nicht unterstützt | 4 | Nicht unterstützt | 29 | 1.4 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
Passing data using structured cloning | Nicht unterstützt | 4 | (Ja) | 8 | 1.0.1 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
Passing data using transferable objects | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | 18 | 1.0.1 | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
[1] As webkitURL
.
Weiterführend
- Using Web Workers
- Worker Interface
- SharedWorker interface
- ServiceWorker API
- Functions and classes available to workers
- Advanced concepts and examples
- ChromeWorker: Um worker mit privilegierten/chrome Code zu nutzen