Deutsch (DE) Übersetzung

JavaScript - Worker API: Freisetzung der Parallelverarbeitungsleistung

Hallo那里，zukünftige JavaScript-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der Web Workers. Stell dir vor, du bist ein Koch in einer beschäftigten Küche. Manchmal brauchst du zusätzliche Hände, um ein komplexes Gericht zuzubereiten. Genau das tun Web Workers für deinen JavaScript-Code - sie leisten eine helfende Hand, um schwere Aufgaben zu erledigen, ohne deinen Hauptkochprozess... ich meine, Code-Prozess zu verlangsamen!

JavaScript - Worker API

Web Worker API: Dein JavaScript-Sous-Chef

Die Web Worker API ist wie ein Assistenzkoch in deiner JavaScript-Küche. Sie ermöglicht es dir, Skripte im Hintergrund unabhängig von anderen Skripten auszuführen. Das bedeutet, du kannst zeitaufwändige Aufgaben ausführen, ohne die Leistung deiner Hauptseite zu beeinträchtigen. Cool, oder?

Lass uns einen Blick darauf werfen und sehen, wie wir diese Helfer einsetzen können!

Überprüfe die Web Worker-Unterstützung

Bevor wir Web Workers verwenden, müssen wir sicherstellen, dass unser Browser sie unterstützt. Das ist wie das Überprüfen der richtigen Ausrüstung in deiner Küche, bevor du anfängst zu kochen. Hier ist, wie wir das tun:

if (typeof(Worker) !== "undefined") {
// Ausgezeichnet! Web Workers werden unterstützt
console.log("Lass uns aan die Arbeit!");
} else {
// Ups! Web Workers werden nicht unterstützt
console.log("Entschuldigung, dein Browser unterstützt keine Web Workers");
}

In diesem Code-Snippet überprüfen wir, ob das Worker-Objekt definiert ist. Wenn ja, sind wir bereit. Wenn nicht, müssen wir einen anderen Weg finden, um unsere Aufgaben zu erledigen.

Erstellen einer Web Worker-Datei

Nun, da wir wissen, dass unser Browser Web Workers unterstützt, erstellen wir einen! Ein Web Worker ist wie ein Rezept, das unser Assistent (der Browser) befolgen wird. Wir erstellen eine separate JavaScript-Datei für unseren Web Worker.

Lassen wir eine Datei namens worker.js erstellen:

// worker.js
self.addEventListener('message', function(e) {
const result = e.data * 2;
self.postMessage(result);
}, false);

Dieser Worker horcht auf eine Nachricht, verdoppelt die Zahl, die er erhält, und sendet das Ergebnis zurück. Einfach, oder?

Erstellen eines Web Worker-Objekts

Nun, da wir unsere Worker-Datei haben, erstellen wir ein Web Worker-Objekt in unserem Hauptskript:

let myWorker;

if (typeof(Worker) !== "undefined") {
myWorker = new Worker("worker.js");
} else {
console.log("Web Workers werden in deinem Browser nicht unterstützt!");
}

Dieser Code erstellt ein neues Web Worker-Objekt, das auf unsere worker.js-Datei verweist. Es ist, als ob wir unserem Assistenten unsere Rezepte überreichen.

Kommunikation mit unserem Web Worker

Nun schauen wir uns an, wie wir eine Aufgabe an unseren Worker senden und das Ergebnis zurückbekommen können:

// Daten an den Worker senden
myWorker.postMessage(10);

// Daten vom Worker empfangen
myWorker.onmessage = function(e) {
console.log("Der Worker hat gesendet: " + e.data);
};

In diesem Beispiel senden wir die Zahl 10 an unseren Worker. Der Worker verdoppelt sie und sendet 20 zurück. Es ist, als ob du deinem Assistenten fragst, die Zutaten für ein Rezept zu verdoppeln!

Beenden der Ausführung des Web Workers

Wenn wir unseren Web Worker nicht mehr benötigen, sollten wir ihn beenden, um Ressourcen freizugeben. Es ist, als ob du deinem Assistenten sagst, er kann nach dem Zubereiten des Essens nach Hause gehen:

myWorker.terminate();
myWorker = undefined;

Dieser Code beendet den Worker und setzt die myWorker-Variable auf undefined, wodurch unsere Referenz zu ihm effektiv entfernt wird.

Beispiel: Komplettes Programm mit Web Worker

Lassen wir alles in einem vollständigen Beispiel zusammenfassen:

<!DOCTYPE html>
<html>
<body>

<p>Zähle Zahlen: <output id="result"></output></p>
<button onclick="startWorker()">Worker starten</button>
<button onclick="stopWorker()">Worker()">Worker stoppen</button>

<script>
let w;

function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("worker.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Entschuldigung! Keine Web Worker-Unterstützung.";
}
}

function stopWorker() {
w.terminate();
w = undefined;
}
</script>

</body>
</html>

Und hier ist unser worker.js:

let i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

Dieses Beispiel erstellt einen Worker, der Zahlen zählt und alle halbe Sekunde aktualisiert. Die Hauptseite kann diesen Worker starten und stoppen, was zeigt, wie wir unseren "Assistenten" von der Haupt-"Küche" aus steuern können.

Web Worker-Anwendungsfälle

Web Workers sind unglaublich nützlich für Aufgaben, die viel Zeit in Anspruch nehmen könnten. Hier sind einige häufige Anwendungsfälle:

Komplexe Berechnungen
Verarbeiten großer Datenmengen
Bild- oder Videobearbeitung
Netzwerkoperationen
Parsing großer Datensätze (wie CSV-Dateien)

Denke daran, diese als komplexe Rezepte, die dein Assistent ohne Störung deines Hauptkochprozesses erledigen kann!

Web Workers und das DOM

Ein wichtiger Punkt, den du beachten solltest: Web Workers können nicht direkt auf das DOM (Document Object Model) zugreifen. Es ist, als ob dein Assistent die Gerichte nicht direkt an die Kunden servieren kann - sie müssen dir zuerst das zubereitete Essen überreichen.

Wenn ein Worker mit der Webseite interagieren muss, muss er eine Nachricht an das Hauptskript senden, das dann das DOM aktualisieren kann.

Schlussfolgerung

Web Workers sind ein leistungsstarkes Werkzeug in deinem JavaScript-Werkzeugkasten. Sie ermöglichen es dir, komplexe Aufgaben auszuführen, ohne die Leistung deines Hauptskripts zu verlangsamen, genau wie ein Assistent Chef dabei hilft, ein komplexes Gericht effizienter zuzubereiten.

Denke daran, der Schlüssel zur effektiven Nutzung von Web Workers ist die Identifizierung von Aufgaben, die unabhängig von deinem Hauptskript ausgeführt werden können. Mit etwas Übung wirst du in der Lage sein, eine ganze Küche von Web Workers zu orchestrieren, die komplexe Aufgaben mühelos erledigen können.

Frohes Coden und möge deine JavaScript-Küche immer mit effizienten Web Workers brummen!

Credits: Image by storyset

Vorheriges Tutorial:

JavaScript - Forms API

Nächstes Tutorial:

JavaScript - Fetch-API