Web Worker API

Web Worker sind im Hintergrund laufendes JavaScript, das die Leistung der Seite nicht beeinflusst.

Was ist ein Web Worker?

Wenn ein Skript auf einer HTML-Seite ausgeführt wird, ist die Seite vor dem Abschluss des Skripts nicht reagibel.

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.

Browser-Unterstützung

Die in der Tabelle angegebenen Zahlen zeigen die erste Browserversion an, die Web Workers vollständig unterstützt:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Januar 2010 September 2012 Juni 2009 Juni 2009 Juni 2011

Web Worker-Instanz

Der folgende Beispiel erstellt einen einfachen Web Worker, der im Hintergrund Berechnungen durchführt:

Beispiel

Zähler:

Probieren Sie selbst aus

Web Worker-Browser überprüfen

Bevor Sie einen Web Worker erstellen, überprüfen Sie bitte, ob der Browser des Benutzers dies unterstützt:

if (typeof(Worker) !== "undefined") {
  // Ja! Web Worker-Unterstützung!
  // Einige Code.....
} else {
  // Entschuldigung! Keine Web Worker-Unterstützung...
}

创建 Web Worker 文件

Lassen Sie uns jetzt unseren Web Worker im externen JavaScript erstellen.

Hier erstellen wir einen wichtigen Skript. Dieser Skript wird in der Datei "demo_workers.js" gespeichert:

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

Ein wichtiger Teil des obigen Codes ist postMessage() Methode - zum Senden von Nachrichten zurück zur HTML-Seite.

Anmerkung:Web Worker werden normalerweise nicht für einfache Skripte verwendet, sondern für CPU-intensive Aufgaben.

Erstellen Sie das Web Worker-Objekt

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

Der folgende Code überprüft, ob der Worker existiert, und erstellt ihn, falls nicht, ein neues 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 senden und empfangen, die vom Web Worker kommen.

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

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

Wenn der Web Worker eine Nachricht veröffentlicht, wird der Code im Event-Listener ausgeführt. Daten vom Web Worker werden in event.data gespeichert.

Beenden Sie den Web Worker

Wenn das Web Worker-Objekt erstellt wird, hört es weiter auf Nachrichten (auch nach Abschluss des externen Skripts) bis es beendet wird.

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

w.terminate();

Wiederverwendung von Web Worker

Wenn die Variable worker auf undefined gesetzt wird, können Sie nach seinem Ende folgenden Code wiederverwenden:

w = undefined;

Vollständiger Code für ein Web Worker-Beispiel

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

Beispiel

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Worker stoppen</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 selbst aus

Web Worker und DOM

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

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