JavaScript Academy · Lektion

Einen Web Worker erstellen

Starten Sie einen Hintergrund-Thread für Aufgaben.

Einen Web Worker erstellen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Warum Web Workers?

JavaScript läuft in einem einzigen Hauptthread. Eine langwierige Berechnung blockiert alles: Die Benutzeroberfläche friert ein und Klicks reagieren nicht mehr. Web Workers führen Skripte in einem Hintergrundthread aus, sodass die Seite responsiv bleibt.

Einen Worker erstellen

Starten Sie einen Worker, indem Sie dem Konstruktor Worker eine Skript-URL übergeben. Der Browser lädt diese Datei und führt sie in einem separaten Thread aus.

const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.

Das Worker-Skript

Die Worker-Datei besteht aus normalem JavaScript, läuft aber in ihrem eigenen globalen Gültigkeitsbereich (kein window, kein document). Sie kommuniziert ausschließlich über Nachrichten.

// worker.js
console.log('worker started');
// This runs off the main thread.

Zwei getrennte globale Gültigkeitsbereiche

Die Hauptseite und der Worker haben jeweils ihren eigenen globalen Gültigkeitsbereich und eigenen Speicher. Sie können Variablen nicht direkt gemeinsam nutzen, sondern tauschen Datenkopien über Nachrichten aus.

Hauptthread: window, DOM, Benutzeroberfläche
Worker-Thread: self, Berechnungen, kein DOM

Self im Worker

Innerhalb eines Workers ist das globale Objekt self (ein DedicatedWorkerGlobalScope). Sie können daran Handler anhängen und APIs darüber aufrufen, auch wenn self häufig implizit verwendet wird.

// worker.js
self.addEventListener('message', (e) => {
  console.log('worker got:', e.data);
});

Module-Worker

Sie können einen Worker erstellen, der ES-Modul-import verwendet, indem Sie die Option type: 'module' übergeben. Dadurch kann der Worker auf übersichtliche Weise weitere Module importieren.

const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.

Skripte importieren (klassisch)

Verwenden Sie in einem klassischen Worker (ohne Module) importScripts, um zusätzliche Skripte synchron in den Gültigkeitsbereich des Workers zu laden.

// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.

Einen Worker beenden

Beenden Sie einen Worker vom Hauptthread aus mit worker.terminate() oder innerhalb des Workers mit self.close(). Dadurch werden der Thread und sein Speicher freigegeben.

// From the main thread:
worker.terminate();

// From inside the worker:
// self.close();

Fehler in Workern behandeln

Hören Sie auf das error-Ereignis des Workers, um nicht abgefangene Ausnahmen zu erkennen, die innerhalb des Workers ausgelöst werden. Das Ereignis enthält die Nachricht, den Dateinamen und die Zeilennummer.

worker.addEventListener('error', (e) => {
  console.log('worker error:', e.message, 'at line', e.lineno);
});

Anforderung an dieselbe Origin

Das Worker-Skript muss von derselben Origin wie die Seite bereitgestellt werden (oder über eine Blob-URL). Sie können einen Worker nicht direkt von einer beliebigen Cross-Origin-URL laden.

// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');

// You can also build one from a Blob URL when needed.

Dedicated oder Shared

Ein Worker ist dedicated: Er ist an die Seite gebunden, die ihn erstellt hat. Ein SharedWorker kann von mehreren Seiten derselben Origin erreicht werden. Dieser Kurs konzentriert sich auf Dedicated Worker.

Schnelltest

Testen Sie Ihr Verständnis der Erstellung von Web Workers.

Zusammenfassung

Sie haben gelernt, Web Workers zu erstellen:

new Worker('worker.js') startet einen Hintergrundthread.
Der Worker hat ein eigenes globales Objekt (self) und keinen DOM.
Verwenden Sie type: 'module' für Imports oder importScripts in klassischen Workern.
terminate() / self.close() beendet den Worker.
Worker müssen von derselben Origin stammen.

Als Nächstes geht es um die Nachrichtenübertragung zwischen Threads.

Häufig gestellte Fragen

Ist die Lektion „Einen Web Worker erstellen“ kostenlos?

Ja — der vollständige Text von „Einen Web Worker erstellen“ 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 „Einen Web Worker erstellen“?

Starten Sie einen Hintergrund-Thread für Aufgaben. 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 1 von 4.

Wie lange dauert die Lektion „Einen Web Worker erstellen“?

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