JavaScript Academy · Lektion

Anwendungsfälle und Einschränkungen

Erkennen Sie, wann Worker helfen und was sie nicht leisten können.

Anwendungsfälle und Einschränkungen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Wofür Worker geeignet sind

Web Worker sind besonders nützlich bei rechenintensiven Aufgaben, die sonst die Benutzeroberfläche einfrieren würden:

Bild- und Videoverarbeitung
Verarbeitung großer Dateien (CSV, JSON)
Kryptografie und Hashing
Physik, Datenanalyse und Simulationen

Kein DOM-Zugriff

Die größte Einschränkung: Worker können nicht auf das DOM zugreifen. Es gibt weder document noch window. Worker berechnen Daten und senden sie zurück; der Hauptthread aktualisiert die Benutzeroberfläche.

// Inside a worker:
// document.querySelector(...) -> ReferenceError
// Workers have no DOM at all.

Was verfügbar ist

Workern stehen weiterhin viele nützliche APIs zur Verfügung: fetch, setTimeout, WebSocket, IndexedDB, crypto und typisierte Arrays. Das Abrufen und Speichern von Daten funktioniert daher problemlos außerhalb des Hauptthreads.

// Inside a worker this is valid:
// const res = await fetch('/data.json');
// const json = await res.json();
// self.postMessage(json);

Grenzen von Structured Clone

Denken Sie daran, dass Nachrichten per Structured Clone kopiert werden. Sie können keine Funktionen, DOM-Knoten oder Klasseninstanzen mit Methoden senden, sondern nur deren serialisierbare Daten.

// Cannot be sent:
// worker.postMessage(() => {});      // function - fails
// worker.postMessage(document.body); // DOM node - fails

Kosten für Start und Nachrichten

Das Erstellen eines Workers und das Serialisieren von Nachrichten verursachen zusätzlichen Aufwand. Bei sehr kleinen Aufgaben können die Kosten der Kommunikation den Vorteil überwiegen. Worker lohnen sich bei umfangreichen, andauernden Aufgaben.

Worker am Leben halten

Für jede Aufgabe einen neuen Worker zu starten, ist ineffizient. Verwenden Sie einen langlebigen Worker wieder und senden Sie ihm viele Nachrichten, oder verwalten Sie für die Parallelisierung einen kleinen Pool von Workern.

// Reuse one worker for many tasks:
const worker = new Worker('worker.js');
function run(task) {
  worker.postMessage(task);
}
// Avoid: new Worker(...) on every single call.

Worker-Pools

Um mehrere CPU-Kerne zu nutzen, erstellen Sie mehrere Worker und verteilen die Aufgaben auf sie. Verfolgen Sie, welche Worker inaktiv sind, und weisen Sie eingehende Arbeit freien Workern zu.

const pool = [];
for (let i = 0; i < 4; i++) {
  pool.push(new Worker('worker.js'));
}
// Round-robin or queue tasks across the pool.

Speicher gemeinsam nutzen

Für fortgeschrittene Anwendungsfälle ermöglicht SharedArrayBuffer Threads, Speicher direkt gemeinsam zu nutzen (mit Atomics für einen sicheren Zugriff). Dafür sind spezielle Header zur Cross-Origin-Isolation erforderlich, und die Verwendung ist fehleranfällig.

// Requires COOP/COEP headers to be enabled.
// const shared = new SharedArrayBuffer(1024);
// Atomics.add(view, 0, 1); // safe concurrent update

Fehlerisolierung

Ein nicht abgefangener Fehler in einem Worker bringt die Seite nicht zum Absturz. Er wird als error-Ereignis am Worker sichtbar. Sie sollten dieses Ereignis behandeln, um den Fehler zu protokollieren oder den Worker neu zu starten.

worker.onerror = (e) => {
  console.log('worker failed:', e.message);
  // optionally recreate the worker here
};

Wann Sie KEINE Worker verwenden sollten

Verzichten Sie auf Worker, wenn die Aufgabe trivial ist, ständige DOM-Aktualisierungen erfordert oder hauptsächlich auf das Netzwerk wartet (asynchrones fetch blockiert ohnehin nicht). Verwenden Sie sie für echte CPU-bound-Aufgaben.

Alles zusammenfügen

Web Worker verzichten zugunsten echter Parallelität auf direkten DOM-Zugriff und die einfache gemeinsame Datennutzung. Verwenden Sie sie für rechenintensive Aufgaben, kommunizieren Sie über Nachrichten, verwenden Sie Worker wieder und übertragen Sie große Puffer, damit Ihre App schnell und flüssig bleibt.

Kurzer Test

Testen Sie Ihr Verständnis der Einsatzmöglichkeiten und Grenzen von Workern.

Zusammenfassung

Sie haben die Einsatzmöglichkeiten und Grenzen von Workern gelernt:

Sie eignen sich hervorragend für rechenintensive Aufgaben, haben aber keinen DOM-Zugriff.
Viele APIs (fetch, IndexedDB, crypto) sind verfügbar.
Nachrichten werden per Structured Clone kopiert, daher können keine Funktionen oder DOM-Knoten übertragen werden.
Verwenden Sie Worker oder Worker-Pools wieder, um die Startkosten zu amortisieren.
Fehler bleiben auf den Worker begrenzt.

Sie haben Web Workers abgeschlossen. Als Nächstes geht es um IndexedDB.

Häufig gestellte Fragen

Ist die Lektion „Anwendungsfälle und Einschränkungen“ kostenlos?

Ja — der vollständige Text von „Anwendungsfälle und Einschränkungen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Anwendungsfälle und Einschränkungen“?

Erkennen Sie, wann Worker helfen und was sie nicht leisten können. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Anwendungsfälle und Einschränkungen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy