Web Workers Spickzettel

Web Workers bieten eine einfache Möglichkeit, Skripte in Hintergrund-Threads auszuführen, ohne die Benutzeroberfläche zu blockieren.

Hintergrund-Threading

Haupt-Client-Thread

const worker = new Worker('worker.js');

worker.onmessage = function (event) {
  console.log('Vom Worker empfangen:', event.data);
};

worker.postMessage('Hallo vom Haupt-Thread!');

Nachrichten können jeden Datentyp enthalten, der vom strukturierten Klon-Algorithmus unterstützt wird (Objekte, Arrays, Strings, Zahlen, Blobs, typisierte Arrays).

Worker-Thread

// Innerhalb von worker.js
self.onmessage = function (event) {
  console.log('Im Worker empfangen:', event.data);
  self.postMessage({ msg: 'Antwort vom Worker' });
};

MessageEvent-Struktur

bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             // Übertragene Nutzlast
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: []
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"

Diese Felder beschreiben die Eigenschaften des MessageEvent-Objekts in onmessage.