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 reagibel, bis das Skript abgeschlossen ist.

Web worker sind im Hintergrund laufendes JavaScript, unabhängig von anderen Skripts 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.

Browserunterstützung

Die Zahlen in der Tabelle weisen auf die erste Browserversion hin, die Web Worker vollständig unterstützt.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers Beispiel

Das folgende Beispiel erstellt einen einfachen Web Worker, der im Hintergrund zählt:

Zähler:

Versuchen Sie es selbst

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

Überprüfen Sie, ob der Benutzerbrowser Web Worker unterstützt, bevor Sie einen Web Worker erstellen:

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 erstellen wir unseren Web Worker in einer externen JavaScript-Datei.

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 obigen Codes ist die postMessage()-Methode - 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. Falls nicht, wird ein neuer Web Worker-Objekt erstellt und der Code aus "demo_workers.js" ausgeführt:

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

Dann können wir Nachrichten vom 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 Worker-Variable auf undefined setzen, können Sie den Code wiederverwenden, wenn der Worker beendet wird:

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>

Versuchen Sie es selbst

Web Worker und DOM

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

  • window Objekt
  • document Objekt
  • parent Objekt