Web Workers-API

Inhaltsverzeichnis

Ein Web-Worker ist ein JavaScript, das im Hintergrund ausgeführt wird, ohne die Leistung der Seite zu beeinträchtigen.

Was ist ein Web Worker?

Beim Ausführen von Skripten auf einer HTML-Seite reagiert die Seite nicht mehr, bis das Skript abgeschlossen ist.

Ein Web-Worker ist ein JavaScript, das unabhängig im Hintergrund ausgeführt wird anderer Skripte, ohne die Leistung der Seite zu beeinträchtigen. Sie können weiterhin tun und lassen, was Sie wollen: Klicken, Auswählen von Dingen usw., während der Web-Worker im Hintergrund läuft.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die ersten Browserversionen an, die Web Worker vollständig unterstützen:


Chrome 4	IE 10	Firefox 3.5	Safari 4	Opera 11.5
Jan 2010	Sep 2012	Jun 2009	Jun 2009	Jun 2011

Beispiel für Web-Worker

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

Beispiel

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  if(typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

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

</body>
</html>

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
    // Some code.....
 }
 else {
    // Sorry! No Web Worker support..
 }

Erstellen Sie eine Web-Worker-Datei

Lassen Sie uns nun unseren Web-Worker in einem externen JavaScript erstellen.

Hier erstellen wir ein Skript, das zählt. Das Skript ist in der Datei „demo_workers.js“ gespeichert:

let i = 0;

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

timedCount();

Der wichtige Teil des obigen Codes ist die Methode postMessage() - mit der eine Nachricht zurück auf die HTML-Seite gesendet wird.

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

Erstellen Sie ein Web-Worker-Objekt

Da wir nun die Web-Worker-Datei haben, müssen wir sie von einer HTML-Seite aus aufrufen.

Die folgenden Zeilen prüfen, ob der Worker bereits vorhanden ist. Wenn nicht, wird ein neues Web-Worker-Objekt erstellt und der Code ausgeführt „demo_workers.js“:

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

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

Fügen Sie dem Web Worker einen „onmessage“-Ereignis-Listener hinzu.

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

Wenn der Web-Worker eine Nachricht postet, wird der Code im Ereignis-Listener ausgeführt. Die Daten vom Web-Worker wird in event.data gespeichert.

Beenden Sie einen Web Worker

Wenn ein Web-Worker-Objekt erstellt wird, wartet es weiterhin auf Nachrichten (auch nach Abschluss des externen Skripts), bis es beendet wird.

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

w.terminate();

Verwenden Sie den Web Worker erneut

Wenn Sie die Worker-Variable nach ihrer Beendigung auf undefiniert setzen, Sie können den Code wiederverwenden:

w = undefined;

Vollständiger Web-Worker-Beispielcode

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

Beispiel

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker()
{
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

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

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  if(typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

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

</body>
</html>

Web Worker und das DOM

Da sich Web-Worker in externen Dateien befinden, haben sie keinen Zugriff auf die folgenden JavaScript-Objekte:

Das Fensterobjekt
Das Dokumentobjekt
Das übergeordnete Objekt