HTML Web Workers

Web worker sind im Hintergrund laufendes JavaScript, die die Leistung der Seite nicht beeinflussen.

Was ist ein Web Worker?

Wenn ein Skript auf einer HTML-Seite ausgeführt wird, ist die Seite nicht reagierbar, bis das Skript abgeschlossen ist.

Web worker sind im Hintergrund laufendes JavaScript, unabhängig von anderen Skripten und beeinflussen nicht die Leistung der Seite. Sie können weiterhin alles tun, was Sie möchten: Klicken, Inhalt auswählen usw., während der Web worker im Hintergrund läuft.

Browser-Unterstützung

Die Zahlen in der Tabelle zeigen die erste Browser-Version an, die Web Worker vollständig unterstützt.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Beispiel für HTML Web Workers

Der folgende Beispielcode erstellt einen einfachen Web Worker, der im Hintergrund zählt:

Zähler:

Probieren Sie selbst aus

Überprüfen Sie die Unterstützung von Web Worker

Überprüfen Sie vor der Erstellung eines Web Workers, ob der Benutzerbrowser dies unterstützt:

if (typeof(Worker) !== "undefined") {
    // Ja! Web Worker werden unterstützt!
    // Einige Code.....
} else {
    // Entschuldigung! Web Worker werden nicht unterstützt!
}

Erstellen Sie eine Web Worker-Datei

Nun, lassen Sie uns unseren Web Worker in einer externen JavaScript-Datei erstellen.

Hier erstellen wir das Zählskript. Das Skript wird in der Datei "demo_workers.js" gespeichert:

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

Ein wichtiger Teil des Codes ist die Methode postMessage() - sie wird verwendet, um eine Nachricht an die HTML-Seite zurückzuschicken.

Kommentare: Web Worker werden normalerweise nicht für so einfache Skripte verwendet, sondern für Aufgaben, die mehr CPU-Leistung erfordern.

Erstellen von Web Worker-Objekt

Jetzt haben wir die Web Worker-Datei und müssen sie von der HTML-Seite aufrufen.

Die folgenden Codezeilen überprüfen, ob ein Worker existiert. Wenn nicht, erstellt er einen neuen Web Worker-Objekt und führt den Code aus "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Dann können wir Nachrichten vom und zum Web Worker empfangen.

Fügen Sie dem Web Worker einen "onmessage"-Event-Listener hinzu:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

Wenn ein Web Worker Nachrichten sendet, wird der Code im Event-Listener ausgeführt. Daten vom Web Worker werden in event.data gespeichert.

Beenden von Web Worker

Nach der Erstellung eines Web Workers hört er weiterhin Nachrichten zu (auch nach Abschluss des externen Skripts), bis er beendet wird.

Um einen Web Worker zu beenden und Ressourcen des Browsers/Computers freizugeben, verwenden Sie die Methode terminate():

w.terminate();

Wiederverwendung von Web Worker

Wenn Sie die Variable worker auf undefined setzen, können Sie den Code nach seinem Beenden wieder verwenden:

w = undefined;

Vollständiger Web Worker-Beispielcode

Wir haben bereits den Worker-Code in der .js-Datei gesehen. Hier ist der Code der HTML-Seite:

Beispiel

<!DOCTYPE html>
<html>
<body>
<p>Zähle Zahlen: <output id="result"></output></p>
<button onclick="startWorker()">Worker starten</button> 
<button onclick="stopWorker()">Worker stoppen</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.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>

Probieren Sie selbst aus

Web Worker und DOM

Da Web Worker in externen Dateien liegen, können sie die folgenden JavaScript-Objekte nicht zugreifen:

  • window-Objekt
  • document-Objekt
  • parent-Objekt