HTML - Web-Worker-API

Web Worker Grundlagen

Web Worker Grundlagen umfassen die Konzepte zum Erstellen, Kommunizieren mit und Beenden von Web Workern. Um einen Web Worker zu erstellen, geben Sie die Skriptdatei an, die den Code des Workers enthält. Die Kommunikation zwischen dem Hauptskript und dem Web Worker erfolgt durch Nachrichtenaustausch, wobei die postMessage()-Methode zum Senden von Nachrichten und der onmessage-Ereignishandler zum Empfangen von Nachrichten verwendet werden. Wenn ein Web Worker nicht mehr benötigt wird, können Sie ihn mit der terminate()-Methode beenden.

Verwendung von Web Workern

Web Worker bieten die Möglichkeit, CPU-intensive Aufgaben auszulagern, Hintergrundaufgaben auszuführen und lang laufende Skripte zu verarbeiten, ohne den Haupt-Thread der Ausführung zu blockieren. Durch den Einsatz von Web Workern können Sie die Leistung und Reaktionsfähigkeit Ihrer Webanwendungen verbessern.

Ein Anwendungsfall für Web Worker ist die Auslagerung CPU-intensiver Aufgaben. Wenn Sie rechenintensive Operationen haben, wie komplexe Algorithmen, Bildverarbeitung oder Datenanalyse, können Sie diese Aufgaben in einen Web Worker verlagern. Dies ermöglicht es dem Haupt-Thread, reaktionsfähig zu bleiben, da die intensiven Berechnungen in einem separaten Thread durchgeführt werden. Benutzer können weiterhin mit der Anwendung interagieren, während der Web Worker die CPU-intensive Arbeit im Hintergrund erledigt.

Web Worker sind auch nützlich für die Ausführung von Hintergrundaufgaben, die keine sofortige Benutzerinteraktion erfordern.

// Haupt-Thread
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
    console.log('Daten geladen:', event.data);
};
worker.postMessage('start');

// worker.js
self.onmessage = function(event) {
    if (event.data === 'start') {
        // Daten vorladen oder Hintergrundaufgabe ausführen
        self.postMessage('Daten geladen');
    }
};

Durch die Ausführung dieser Aufgaben in einem Web Worker können Sie sicherstellen, dass sie die Reaktionsfähigkeit des Haupt-Threads nicht beeinträchtigen. Der Web Worker kann im Hintergrund arbeiten, Daten abrufen oder Aktualisierungen durchführen, ohne die Benutzererfahrung zu beeinflussen.

Ein weiteres Szenario, in dem Web Worker glänzen, ist die Verarbeitung lang laufender Skripte.

// Haupt-Thread
const worker = new Worker('longTaskWorker.js');
worker.onmessage = function(event) {
    console.log('Aufgabe abgeschlossen:', event.data);
};
worker.postMessage('start');

// longTaskWorker.js
self.onmessage = function(event) {
    if (event.data === 'start') {
        // Lang laufende Aufgabe ausführen
        let result = performComplexCalculation();
        self.postMessage(result);
    }
};

function performComplexCalculation() {
    // Komplexe Berechnungslogik
    return 'berechnetes Ergebnis';
}

Wenn Sie ein Skript haben, das beträchtliche Zeit zur Ausführung benötigt, wie eine komplexe Datenverarbeitungsaufgabe oder eine lang laufende Animation, kann die Ausführung auf dem Haupt-Thread die Benutzeroberfläche einfrieren. Durch die Verlagerung des lang laufenden Skripts in einen Web Worker können Sie den Haupt-Thread frei halten, um auf Benutzerinteraktionen zu reagieren. Der Web Worker kann das Skript asynchron ausführen und ermöglicht es der Anwendung, reaktionsfähig zu bleiben.

Web Worker Kommunikation

Web Worker Kommunikation beinhaltet das Senden von Nachrichten zwischen dem Hauptskript und dem Web Worker sowie den Empfang von Nachrichten vom Web Worker zurück zum Hauptskript. Die Kommunikation erfolgt über die postMessage() Methode und den onmessage Ereignishandler.

Um eine Nachricht an einen Web Worker zu senden, verwenden Sie die postMessage() Methode aus dem Hauptskript. Die postMessage() Methode nimmt die Nachricht als Argument entgegen, welche ein einfacher Wert oder ein Objekt sein kann.

// Hauptskript
const worker = new Worker('worker.js');
worker.postMessage('Hallo vom Hauptskript');

Auf der Seite des Web Workers können Sie die Nachricht empfangen, indem Sie einen onmessage Ereignishandler einrichten. Das an den Handler übergebene Ereignisobjekt enthält die Nachrichtendaten in seiner data Eigenschaft.

// worker.js
self.onmessage = function(event) {
    console.log('Nachricht empfangen:', event.data);
};

Ebenso kann der Web Worker Nachrichten zurück an das Hauptskript senden, indem er die postMessage() Methode verwendet. Das Hauptskript kann diese Nachrichten empfangen, indem es seinen eigenen onmessage Ereignishandler einrichtet.

// worker.js
self.postMessage('Hallo vom Web Worker');

// Hauptskript
worker.onmessage = function(event) {
    console.log('Nachricht vom Worker empfangen:', event.data);
};

Zusätzlich zum Senden einfacher Werte oder Objekte können Sie auch Daten mithilfe von übertragbaren Objekten transferieren. Übertragbare Objekte ermöglichen es Ihnen, große Daten wie ArrayBuffer oder MessagePort zwischen dem Hauptskript und dem Web Worker zu übertragen, ohne die Daten zu kopieren. Dies kann die Leistung beim Umgang mit großen Datensätzen verbessern. Um Daten zu übertragen, übergeben Sie ein Array von übertragbaren Objekten als zweites Argument an die postMessage() Methode.

// Hauptskript
const largeData = new ArrayBuffer(1024 * 1024); // 1MB Daten
worker.postMessage({ data: largeData }, [largeData]);

// Hauptskript
worker.onmessage = function(event) {
    console.log('Nachricht vom Worker empfangen:', event.data);
    // Nachricht verarbeiten und Aktionen ausführen
};

// worker.js
self.onmessage = function(event) {
    console.log('Nachricht empfangen:', event.data);
    // Nachricht verarbeiten und Aktionen ausführen
    self.postMessage('Nachricht verarbeitet');
};

Fehlerbehandlung bei Web Workern

Die Fehlerbehandlung ist ein wichtiger Teil der Arbeit mit Web Workern. Sie umfasst den Umgang mit Fehlern, die im Web Worker-Skript auftreten können, und deren Weiterleitung an das Hauptskript zur Verarbeitung.

Um Fehler in Web Workern zu behandeln, müssen Sie auf Fehlerereignisse hören. Das Web Worker-Skript kann ein Fehlerereignis mithilfe des self.onerror-Ereignishandlers auslösen. Dieser Ereignishandler wird aufgerufen, wenn ein Fehler im Web Worker-Skript auftritt.

// worker.js
self.onerror = function(event) {
    console.error('Fehler im Web Worker:', event.message);
    // Fehler behandeln oder Aufräumarbeiten durchführen
    self.postMessage({ error: event.message });
};

Im obigen Beispiel wird der self.onerror-Ereignishandler verwendet, um Fehler im Web Worker-Skript abzufangen. Sie können die Fehlermeldung protokollieren, den Fehler behandeln oder notwendige Aufräumarbeiten durchführen.

Um den Fehler an das Hauptskript zu senden, können Sie eine Fehlermeldung mit self.postMessage() senden. Das Hauptskript kann dann auf diese Fehlermeldung hören und entsprechend reagieren.

// Hauptskript
worker.onmessage = function(event) {
    if (event.data.error) {
        console.error('Fehler vom Web Worker empfangen:', event.data.error);
        // Fehler im Hauptskript behandeln
    }
};

Im Hauptskript können Sie prüfen, ob die empfangene Nachricht eine Fehlereigenschaft hat. Wenn ein Fehler empfangen wird, können Sie die Fehlermeldung protokollieren und behandeln.

// Hauptskript
const worker = new Worker('nicht-vorhandenes-skript.js'); // Löst einen Fehler aus

// worker.js
console.log('Hallo vom Web Worker') // Fehlendes Semikolon

// worker.js
const grosseDaten = new Array(1000000000); // Zuweisung eines großen Arrays

Fortgeschrittene Web Worker-Techniken

Web Worker bieten fortgeschrittene Techniken, mit denen Sie ihre Funktionalität erweitern und sie mit anderen JavaScript-Funktionen und APIs kombinieren können. Lassen Sie uns einige dieser fortgeschrittenen Techniken betrachten.

Das Importieren von Skripten in Web Workern ist eine Möglichkeit, Code innerhalb eines Web Workers zu modularisieren und wiederzuverwenden. Mit der Funktion importScripts() können Sie externe JavaScript-Dateien in den Geltungsbereich des Web Workers laden. So können Sie Ihren Worker-Code in separate Dateien aufteilen, um eine bessere Organisation und Wartbarkeit zu erreichen.

// worker.js
importScripts('utility.js', 'math.js');

self.onmessage = function(event) {
    // Funktionen oder Variablen aus den importierten Skripten verwenden
    const result = performCalculation(event.data);
    self.postMessage(result);
};

Die Verwendung von Web Workern mit Promises ist eine weitere leistungsstarke Technik. Promises bieten eine Möglichkeit, asynchrone Operationen zu handhaben und die Lesbarkeit des Codes zu verbessern. Indem Sie die Kommunikation zwischen dem Hauptskript und dem Web Worker in Promises einbetten, können Sie einen strukturierteren und intuitiveren Datenfluss erzeugen.

// Hauptskript
function performTask(data) {
    return new Promise((resolve, reject) => {
        const worker = new Worker('worker.js');
        worker.onmessage = function(event) {
            resolve(event.data);
        };
        worker.onerror = function(error) {
            reject(error);
        };
        worker.postMessage(data);
    });
}

// Verwendung
performTask('Aufgabendaten')
    .then(result => {
        console.log('Aufgabenergebnis:', result);
    })
    .catch(error => {
        console.error('Aufgabenfehler:', error);
    });

Die Kombination von Web Workern mit anderen APIs eröffnet neue Möglichkeiten. Sie können beispielsweise Web Worker mit der File API verwenden, um Dateiverarbeitungsaufgaben im Hintergrund durchzuführen. Dies ermöglicht es Ihnen, Dateien zu lesen und zu ändern, ohne den Hauptthread zu blockieren.

// Hauptskript
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const worker = new Worker('fileWorker.js');
    worker.onmessage = function(event) {
        console.log('Datei verarbeitet:', event.data);
    };
    worker.postMessage(file);
});

// fileWorker.js
self.onmessage = function(event) {
    const file = event.data;
    // Datei im Web Worker verarbeiten
    // ...
    self.postMessage('Dateiverarbeitung abgeschlossen');
};

Web Worker Beispiele

Web Worker ermöglichen es, Aufgaben vom Hauptthread zu verlagern und die Leistung von Webanwendungen zu verbessern. Sehen wir uns einige Beispiele an, die den Einsatz von Web Workern in verschiedenen Situationen zeigen.

// Hauptskript (main.js)
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
  console.log('Ergebnis vom Worker erhalten:', event.data);
};
worker.postMessage(5);

// Worker-Skript (worker.js)
self.onmessage = function(event) {
  const number = event.data;
  const result = fibonacci(number);
  self.postMessage(result);
};

function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

In diesem einfachen Beispiel erstellt das Hauptskript einen neuen Web Worker und sendet ihm eine Zahl mittels postMessage(). Das Worker-Skript empfängt die Nachricht, berechnet die Fibonacci-Zahl mit einer rekursiven Funktion und sendet das Ergebnis über postMessage() zurück an das Hauptskript. Das Hauptskript gibt das empfangene Ergebnis in der Konsole aus.

// Hauptskript (main.js)
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
  const { type, data } = event.data;
  if (type === 'progress') {
    updateProgressBar(data.progress);
  } else if (type === 'result') {
    displayResult(data.result);
  }
};
worker.postMessage({ type: 'start', data: { /* komplexe Daten */ } });

// Worker-Skript (worker.js)
self.onmessage = function(event) {
  const { type, data } = event.data;
  if (type === 'start') {
    processData(data);
  }
};

function processData(data) {
  // Führe komplexe Datenverarbeitung durch
  for (let i = 0; i < data.length; i++) {
    // Verarbeite Datenelement
    const progress = ((i + 1) / data.length) * 100;
    self.postMessage({ type: 'progress', data: { progress } });
  }
  const result = { /* verarbeitete Daten */ };
  self.postMessage({ type: 'result', data: { result } });
}

In diesem komplexeren Beispiel sendet das Hauptskript eine Nachricht mit einem bestimmten Typ und Daten an den Worker. Das Worker-Skript empfängt die Nachricht, prüft den Nachrichtentyp und führt die entsprechende Aktion aus. In diesem Fall verarbeitet der Worker die empfangenen Daten, wenn der Nachrichtentyp 'start' ist. Während der Verarbeitung sendet der Worker Fortschrittsaktualisierungen über postMessage() zurück an das Hauptskript. Nach Abschluss der Verarbeitung sendet der Worker das Endergebnis an das Hauptskript zurück. Das Hauptskript behandelt die empfangenen Nachrichten je nach Typ, aktualisiert den Fortschrittsbalken oder zeigt das Ergebnis an.