Wie erstellt man einen Web Worker-Thread in JavaScript?

Einen Web Worker-Thread in JavaScript kann man mit dem Konstruktor Worker erstellen.

// Erstellen eines neuen Web Workers, indem der Pfad zur JS-Datei übergeben wird,
// die in einem separaten Thread ausgeführt wird.
const worker = new Worker('worker.js'); 

In der Datei worker.js (oder jeder anderen beim Erstellen des Workers angegebenen Datei) wird der Code in einem separaten Thread ausgeführt.

// worker.js

// Verarbeitung von Nachrichten, die vom Haupt-Thread gesendet werden
self.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Nachricht vom Haupt-Thread empfangen:', receivedData);

  // Nachricht zurück an den Haupt-Thread senden
  const responseData = { message: 'Hallo vom Worker!', data: receivedData };
  self.postMessage(responseData);
};

// Optional können Fehlerbehandlungen hinzugefügt werden
self.onerror = function(error) {
  console.error('Fehler im Worker:', error);
};

Im Haupt-Thread (wo der Worker erstellt wurde) kann mit dem Worker interagiert werden:

// main.js

const worker = new Worker('worker.js'); 

// Nachricht an den Web Worker senden
worker.postMessage({ command: 'start', payload: 'some data' });

// Nachrichten vom Web Worker empfangen und verarbeiten
worker.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Nachricht vom Worker empfangen:', receivedData);
};

// Fehler im Web Worker behandeln
worker.onerror = function(error) {
  console.error('Fehler im Worker im Haupt-Thread:', error);
};

// Web Worker beenden (optional)
// worker.terminate(); 

Wichtige Punkte:

• Kommunikation: Der Datenaustausch zwischen Haupt-Thread und Worker erfolgt über Nachrichten mit den Methoden postMessage() und onmessage.
• Einschränkungen: Worker haben keinen Zugriff auf DOM, window-Objekt und andere globale Objekte des Browsers. Sie haben eingeschränkten Zugriff auf navigator, location, XMLHttpRequest, setTimeout, setInterval, fetch, WebSockets und andere.
• Isolation: Der Code im Worker läuft in einem separaten Thread, was Blockierungen im Haupt-Thread verhindert und die Leistung verbessert, insbesondere bei ressourcenintensiven Berechnungen.