Was sind Web Worker?

Web Worker sind eine Funktion von JavaScript, die es uns ermöglicht, Skripte im Hintergrund auszuführen, ohne den Hauptthread zu blockieren. Dies ist nützlich, wenn wir Aufgaben mit langer Laufzeit ausführen müssen, die möglicherweise die Benutzeroberfläche einfrieren könnten, wie z. B. komplexe Berechnungen oder Datenverarbeitung.

Web-Worker sind separate JavaScript-Dateien, die in ihren eigenen Threads ausgeführt werden. Sie werden mit dem Konstruktor erstellt Workerund kommunizieren über die Methoden postMessage()und mit dem Hauptthread onmessage. In diesem Blogbeitrag untersuchen wir anhand von Beispielen und einem leicht verständlichen Kontext für Leser über 18 Jahre, wie Web Worker in JavaScript verwendet werden.

Erstellen eines Web Workers

Um einen Web-Worker zu erstellen, müssen wir eine neue JavaScript-Datei erstellen, die im Hintergrund ausgeführt wird. Erstellen wir beispielsweise eine Datei mit dem Namen, worker.jsdie die Fakultät einer bestimmten Zahl berechnet:

// worker.js

function calculateFactorial(n) {
  let result = 1;
  for (let i = 2; i <= n; i++) {
    result *= i;
  }
  return result;
}

onmessage = function(event) {
  const n = event.data;
  const result = calculateFactorial(n);
  postMessage(result);
};

Um diesen Worker in unserem Hauptskript zu verwenden, müssen wir eine neue Instanz des WorkerKonstruktors erstellen und ihr den Pfad zu unserer Worker-Datei übergeben:

// index.js

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

factorialWorker.postMessage(10);

factorialWorker.onmessage = function(event) {
  const result = event.data;
  console.log(`The factorial of 10 is ${result}`);
};

Hinweis: Worker benötigen zum Ausführen einen gehosteten Dienst. Dieser kann nicht auf einer HTML-Seite ausgeführt werden, indem nur „[Dateiname].html“ ausgeführt wird. Damit die Worker funktionieren, müssen die Importanweisungen hinzugefügt und die Methode geändert werden

const customWorker = new Worker(
    new URL('./worker.js', import.meta.url),
    { type: 'module' }
);

Wenn Sie das obige Skript ausführen, wird das Ergebnis an die Konsole ausgegeben: „Die Fakultät von 10 ist 3628800“.

Einschränkungen von Web Workern

Während Web-Worker nützlich sind, um umfangreiche Rechenaufgaben vom Haupt-Thread zu verlagern, weisen sie doch einige Einschränkungen auf. Web-Worker können beispielsweise nicht auf das DOM oder andere APIs zugreifen, die für den Haupt-Thread verfügbar sind. Sie können auch keinen Speicher mit dem Hauptthread teilen, was bedeutet, dass wir die Nachrichtenübermittlung verwenden müssen, um zwischen den beiden Threads zu kommunizieren.

Darüber hinaus werden Web Worker in einigen älteren Browsern nicht unterstützt . Bevor Sie Web-Worker in Ihrer Anwendung verwenden, ist es wichtig zu prüfen, ob sie in allen Zielbrowsern unterstützt werden.

Abschluss

Web Worker sind eine leistungsstarke Funktion von JavaScript, die es uns ermöglicht, lang laufende Aufgaben im Hintergrund auszuführen, ohne den Hauptthread zu blockieren. Sie sind einfach zu erstellen und zu verwenden und können die Leistung unserer Anwendungen erheblich verbessern. Allerdings unterliegen Web-Worker einigen Einschränkungen, und es ist wichtig, diese im Hinterkopf zu behalten, wenn Sie sie in Ihrer Anwendung verwenden.

Ich hoffe, dass diese Einführung in Web Worker für Leser auf der ganzen Welt hilfreich und informativ war.