Was sind Web-Worker und wozu sind sie nützlich?

Web-Worker sind eine Möglichkeit, Skripte in Hintergrund-Threads auszuführen, die vom Haupt-UI-Thread getrennt sind.

Ihre Hauptzwecke:

• Leistungssteigerung: Das Verschieben ressourcenintensiver Aufgaben (komplizierte Berechnungen, Verarbeitung großer Datenmengen, Parsing) vom Haupt-Thread, der für das Rendern der Oberfläche und die Verarbeitung von Benutzereingaben zuständig ist. Dies verhindert das Einfrieren der Seite und verbessert die Reaktionsfähigkeit der Anwendung.
• Parallelismus: Ermöglicht die gleichzeitige Ausführung mehrerer Aufgaben, um Mehrkernprozessoren effizienter zu nutzen.

Es gibt drei Arten von Web-Workern:

1. Dedicated Workers: Sind an eine bestimmte Seite gebunden und nur für diese zugänglich.
2. Shared Workers: Können von mehreren Seiten oder Tabs derselben Domain genutzt werden.
3. Service Workers: Arbeiten wie Netzwerk-Proxy, die Netzwerk-Anfragen abfangen und Offline-Funktionalitäten, Push-Benachrichtigungen und andere Features von Progressive Web Apps (PWA) ermöglichen.

Arbeitsprinzipien:

• Separater Kontext: Der Worker hat sein eigenes globales Objekt und Zugriff auf ein Teilset der Browser-API (kein Zugriff auf DOM, window, document, parent).
• Nachrichtenübermittlung: Die Interaktion zwischen Haupt-Thread und Worker erfolgt über Nachrichten mit postMessage() und onmessage. Daten werden durch Wert (kopiert) oder durch Referenz (Transferable Objects) übertragen.

Beispiel für die Verwendung eines Dedicated Workers:

// main.js (Haupt-Thread)
const worker = new Worker('worker.js'); // Worker erstellen

worker.onmessage = (event) => {
  // Verarbeitung der Nachricht vom Worker
  console.log('Vom Worker empfangen:', event.data);
};

worker.postMessage('Starte komplexe Operation'); // Nachricht an den Worker senden

// worker.js (Worker-Datei)
onmessage = (event) => {
  // Verarbeitung der Nachricht vom Haupt-Thread
  console.log('Vom Haupt-Thread empfangen:', event.data);

  // Komplexe Aufgabe ausführen
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Ergebnis zurücksenden
  postMessage(result);
};