HTML5 Web Workers

Ein Web Worker ist JavaScript, das im Hintergrund läuft, ohne die Leistung der Seite zu beeinträchtigen.

Was ist ein Web Worker?

Wenn ein Skript in einer HTML-Seite ausgeführt wird, reagiert die Seite nicht, bis das Skript beendet ist.

Ein Web Worker ist JavaScript, das im Hintergrund unabhängig von anderen Skripten läuft, ohne die Leistung der Seite zu beeinträchtigen. Sie können weiterhin tun, was Sie möchten: klicken, Inhalte auswählen usw., während der Web Worker im Hintergrund läuft.

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari und Opera unterstützen alle Web Workers.

HTML5 Web Workers Beispiel

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

Beispiel

Zähler:




Selbst ausprobieren »

demo_workers.js Datei-Code

var i=0;

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

timedCount();

Prüfen, ob der Browser Web Worker unterstützt

Bevor Sie einen Web Worker erstellen, prüfen Sie, ob der Browser des Benutzers ihn unterstützt:

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持
}

Eine Web-Worker-Datei erstellen

Jetzt erstellen wir unseren Web Worker in einem externen JavaScript.

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

var i=0;

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

timedCount();

Der wichtige Teil des obigen Codes ist die Methode postMessage() – sie wird verwendet, um eine Nachricht zurück an die HTML-Seite zu senden.

Hinweis:Web Worker werden normalerweise nicht für so einfache Skripte verwendet, sondern für CPU-intensivere Aufgaben.

Ein Web-Worker-Objekt erstellen

Wir haben bereits die Web-Worker-Datei, und jetzt müssen wir sie von einer HTML-Seite aus aufrufen.

Der folgende Code erkennt, ob der Worker existiert; falls nicht, erstellt er ein neues Web-Worker-Objekt und führt den Code in "demo_workers.js" aus:

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

Dann können wir Nachrichten an den Web Worker senden und von ihm empfangen.

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

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

Einen Web Worker beenden

Wenn wir ein Web-Worker-Objekt erstellen, hört es weiterhin auf Nachrichten (auch nachdem das externe Skript abgeschlossen ist), bis es beendet wird.

Um einen Web Worker zu beenden und Browser- und Computerressourcen freizugeben, verwenden Sie die Methode terminate():

w.terminate();

Vollständiger Web-Worker-Beispielcode

Wir haben den Worker-Code bereits in der .js-Datei gesehen. Unten ist der Code für die HTML-Seite:

Beispiel

<!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>Beispiel-Tutorial (example.com)</title>  </head> <body> <p>Anzahl:<output id="result"></output></p> <button onclick="startWorker()">Arbeit starten</button> <button onclick="stopWorker()">Arbeit stoppen</button> <p><strong>Hinweis:</strong>Internet Explorer 9 und frühere IE-Versionen unterstützen Web Workers nicht.</p> <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 = "Leider unterstützt Ihr Browser keine Web Workers..."; } } function stopWorker() { w.terminate(); w = undefined; }
</script> </body> </html>

Selbst ausprobieren »

Web Workers und DOM

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

  • window-Objekt
  • document-Objekt
  • parent-Objekt
Weitere Erweiterungen