Web Workers API
Web Workers ermöglichen es, eine Skriptoperation in einem Hintergrund-Thread auszuführen, der vom Hauptausführungsthread einer Webanwendung getrennt ist. Der Vorteil hierbei ist, dass umfangreiche Verarbeitungen in einem separaten Thread durchgeführt werden können, sodass der Hauptthread (normalerweise die Benutzeroberfläche) ohne Blockierung oder Verlangsamung ausgeführt werden kann.
Konzepte und Nutzung von Web Workers
Ein Worker ist ein Objekt, das mithilfe eines Konstruktors erstellt wird (z. B. Worker()
), der eine benannte JavaScript-Datei ausführt — diese Datei enthält den Code, der im Worker-Thread ausgeführt wird.
Zusätzlich zu der Standardmenge an JavaScript-Funktionen (wie String
, Array
, Object
, JSON
, etc.) können Sie fast jeden Code, den Sie mögen, innerhalb eines Worker-Threads ausführen. Es gibt einige Ausnahmen: Zum Beispiel können Sie das DOM nicht direkt von innerhalb eines Workers manipulieren oder einige Standardmethoden und -eigenschaften des Window
-Objekts verwenden. Informationen über den Code, den Sie verwenden können, finden Sie unten unter globaler Kontext und Funktionen von Workern und unterstützte Web-APIs.
Daten werden zwischen Workern und dem Hauptthread über ein Nachrichtensystem gesendet — beide Seiten senden ihre Nachrichten mittels der postMessage()
-Methode und reagieren auf Nachrichten über den onmessage
-Ereignishandler (die Nachricht ist innerhalb der message
-Eigenschaft data
enthalten). Die Daten werden kopiert anstatt geteilt.
Worker können ihrerseits neue Worker erzeugen, solange diese Worker innerhalb der gleichen Origin wie die übergeordnete Seite gehostet werden.
Zusätzlich können Worker Netzwerk-Anfragen mit den APIs fetch()
oder XMLHttpRequest
durchführen (beachten Sie jedoch, dass das Attribut responseXML
von XMLHttpRequest
immer null
sein wird).
Typen von Workern
Es gibt mehrere verschiedene Arten von Workern:
- Dedizierte Worker sind Worker, die von einem einzigen Skript genutzt werden. Dieser Kontext wird durch ein
DedicatedWorkerGlobalScope
-Objekt dargestellt. - Gemeinsame Worker sind Worker, die von mehreren Skripten genutzt werden können, die in verschiedenen Fenstern, IFrames usw. ausgeführt werden, solange sie sich im gleichen Domainbereich 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 (sofern verfügbar) sitzen. Unter anderem sollen sie die Erstellung effektiver Offline-Erlebnisse ermöglichen, Netzwerk-Anfragen abfangen und je nach Verfügbarkeit des Netzwerks geeignete Maßnahmen ergreifen, sowie Ressourcen auf dem Server aktualisieren. Sie ermöglichen auch den Zugriff auf Push-Benachrichtigungen und Hintergrund-Synchronisations-APIs.
Hinweis: Laut der Web Workers Spezifikation sollten Worker-Fehlerereignisse nicht nach oben durchgereicht werden (siehe Firefox Fehler 1188141). Dies wurde in Firefox 42 implementiert.
Worker globale Kontexte und Funktionen
Worker laufen in einem anderen globalen Kontext als das aktuelle window
! Während Window
nicht direkt für Worker verfügbar ist, sind viele der gleichen Methoden in einem gemeinsamen Mixin (WindowOrWorkerGlobalScope
) definiert und für Worker durch ihre eigenen von WorkerGlobalScope
abgeleiteten Kontexte verfügbar gemacht:
DedicatedWorkerGlobalScope
für dedizierte WorkerSharedWorkerGlobalScope
für gemeinsame WorkerServiceWorkerGlobalScope
für Service Worker
Einige der Funktionen (eine Teilmenge), die allen Workern und dem Hauptthread gemeinsam sind (aus WindowOrWorkerGlobalScope
), sind:
WorkerGlobalScope.atob()
WorkerGlobalScope.btoa()
WorkerGlobalScope.clearInterval()
WorkerGlobalScope.clearTimeout()
WorkerGlobalScope.createImageBitmap()
WorkerGlobalScope.dump()
Nicht standardisiertWorkerGlobalScope.fetch()
WorkerGlobalScope.queueMicrotask()
WorkerGlobalScope.reportError()
WorkerGlobalScope.setInterval()
WorkerGlobalScope.setTimeout()
WorkerGlobalScope.structuredClone()
DedicatedWorkerGlobalScope.requestAnimationFrame()
(nur für dedizierte Worker)DedicatedWorkerGlobalScope.cancelAnimationFrame()
(nur für dedizierte Worker)
Die folgenden Funktionen sind nur für Worker verfügbar:
WorkerGlobalScope.importScripts()
(alle Worker)DedicatedWorkerGlobalScope.postMessage()
(nur für dedizierte Worker)
Unterstützte Web-APIs
Hinweis: Wenn eine aufgelistete API auf einer Plattform in einer bestimmten Version unterstützt wird, kann im Allgemeinen davon ausgegangen werden, dass sie in Webarbeitern verfügbar ist. Sie können die Unterstützung für ein bestimmtes Objekt/eine bestimmte Funktion auch unter https://worker-playground.glitch.me/ testen.
Die folgenden Web-APIs sind für Worker verfügbar:
- Background Fetch API
- Background Synchronization API
- Barcode Detection API
- Broadcast Channel API
- Canvas API
- Channel Messaging API
- Compression Streams API
- Compute Pressure API
- Console API
- Content Index API
- Cookie Store API (nur für Service Worker)
- CSS Font Loading API
- Encoding API
- Fetch API
- File API
- File System API
- Idle Detection API
- IndexedDB API
- Media Capabilities API
- Media Source Extensions API (nur für dedizierte Worker)
- Network Information API
- Notifications API
- Payment Handler API
- Performance API
- Permissions API
- Prioritized Task Scheduling API
- Push API
- Reporting API
- Server-Sent Events
- Service Worker API
- Streams API
- Trusted Types API
- URL API
- URL Pattern API
- User-Agent Client Hints API
- Web Crypto API
- Web Locks API
- Web Serial API
- Web Periodic Background Synchronization API
- WebCodecs API
- WebGL API
- WebGPU API
- WebHID API (nur für dedizierte und Service Worker)
- WebUSB API
- WebSockets API
- XMLHttpRequest API
Worker können auch andere Worker erzeugen, daher sind diese APIs ebenfalls verfügbar:
Web Worker Schnittstellen
Worker
-
Repräsentiert einen laufenden Worker-Thread und ermöglicht es Ihnen, Nachrichten an den laufenden Worker-Code zu übermitteln.
WorkerLocation
-
Definiert den absoluten Standort des vom
Worker
ausgeführten Skripts. -
Repräsentiert eine spezielle Art von Worker, auf die von mehreren Browsing-Kontexten (d. h. Fenster, Tabs oder IFrames) oder sogar anderen Workern zugegriffen werden kann.
WorkerGlobalScope
-
Repräsentiert den generischen Gültigkeitsbereich eines jeden Workers (erfüllt die gleiche Funktion wie
Window
für normale Webinhalte). Unterschiedliche Arten von Workern haben Gültigkeitsbereichsobjekte, die von dieser Schnittstelle erben und spezifischere Funktionen hinzufügen. DedicatedWorkerGlobalScope
-
Repräsentiert den Gültigkeitsbereich eines dedizierten Workers, der von
WorkerGlobalScope
erbt und einige dedizierte Funktionen hinzufügt. -
Repräsentiert den Gültigkeitsbereich eines gemeinsamen Workers, der von
WorkerGlobalScope
erbt und einige dedizierte 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 für einen dedizierten Worker (dedizierten Worker ausführen).
- Einfaches Beispiel für einen gemeinsamen Worker (gemeinsamen Worker ausführen).
- Beispiel für einen OffscreenCanvas Worker (OffscreenCanvas Worker ausführen).
Weitere Informationen darüber, wie diese Demos funktionieren, finden Sie in Using Web Workers.
Spezifikationen
Specification |
---|
HTML Standard # workers |
Siehe auch
- Using Web Workers
Worker
SchnittstelleSharedWorker
Schnittstelle- Service Worker API