EMZETT.
Login

Emzett Wiki

Web Worker: Rechenlast aus dem Hauptthread auslagern

Properties1
tagsglossar, javascript, performance

2 Min. Lesezeit

Web Worker: Rechenlast aus dem Hauptthread auslagern

Kurz: Ein Web Worker führt JavaScript in einem eigenen Thread aus, damit schwere Berechnungen die Oberfläche nicht einfrieren; Kommunikation läuft über Nachrichten.

Genauer: JavaScript im Browser läuft normalerweise im Hauptthread, der auch Rendering und Eingaben bearbeitet. Eine lange Schleife (Bild verarbeiten, große JSON parsen, Suchindex bauen) lässt die Seite ruckeln/einfrieren und verschlechtert INP. Ein Worker schafft Abhilfe.

Im Detail

Dedizierter Worker

// main.js
const worker = new Worker(new URL('./rechne.js', import.meta.url), { type: 'module' });
worker.postMessage({ zahlen: grosseListe });
worker.onmessage = (e) => zeige(e.data.summe);
 
// rechne.js
self.onmessage = (e) => {
  const summe = e.data.zahlen.reduce((a, b) => a + b, 0);
  self.postMessage({ summe });
};

Der Worker hat keinen Zugriff auf DOM und window, aber auf fetch, IndexedDB, WebAssembly, crypto, Timer. Daten werden per Structured Clone kopiert; große Puffer als Transferable (postMessage(buf, [buf])) verschieben statt kopieren, oder per SharedArrayBuffer teilen (benötigt Cross-Origin-Isolation).

Arten

  • Dedicated Worker: gehört einer Seite.
  • Shared Worker: von mehreren Tabs genutzt.
  • Service Worker: Netzwerk-Proxy/Offline/Push (eigene Aufgabe).
  • Worklets (Audio/Paint) für spezielle Rendering-Aufgaben.
  • OffscreenCanvas: Zeichnen im Worker (Spiele/Grafiken). Bibliotheken: Comlink macht Worker-Aufrufe zu normalen async-Funktionen; Vite/Webpack bündeln Worker-Dateien.

Wann lohnt es sich?

Lohnt: Bild-/Audio-/Videoverarbeitung, Parsen/Komprimieren, Kryptografie, WASM-Programme (Python in Pyodide, Emulatoren), Suche/Index, Physik-Berechnung in Spielen, Syntax-Analyse in Editoren. Lohnt nicht: Kleinkram (Kosten für Start und Kopieren), DOM-Arbeit (geht nicht im Worker). Lange Arbeit alternativ in Stücke teilen (requestIdleCallback, scheduler.yield()), damit der Hauptthread atmen kann.

Praxis

  • Fehler abfangen (worker.onerror), Abbruch (worker.terminate()), Fortschritt per Nachrichten.
  • Anzahl der Worker an Kerne anpassen (navigator.hardwareConcurrency), Pool wiederverwenden.
  • Sicherheit: Worker-Code gleiche Herkunft, CSP worker-src beachten; Nachrichten validieren.
  • Debuggen: DevTools zeigen Worker als eigene Threads.
  • Node.js hat worker_threads, Python hat multiprocessing (gleiche Idee: Parallelität ohne gemeinsamen Zustand).

Siehe auch: Service Worker, Event Loop, Lighthouse und Core Web Vitals

Backlinks