HTML Web Workers-API
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 Skripts auf einer HTML-Seite reagiert die Seite nicht mehr, bis das Skript abgeschlossen ist.
Ein Web-Worker ist ein JavaScript, das unabhängig von anderen Skripten im Hintergrund ausgeführt wird, ohne die Leistung der Seite zu beeinträchtigen. Sie können weiterhin tun, was Sie wollen: klicken, Dinge auswählen usw., während der Web-Worker im Hintergrund läuft.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die Web Worker vollständig unterstützt.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
Beispiel für HTML-Web-Worker
Das folgende Beispiel erstellt einen einfachen Web-Worker, der im Hintergrund Zahlen zählt:
Überprüfen Sie die Webworker-Unterstützung
Bevor Sie einen Web Worker erstellen, prüfen Sie, ob der Browser des Benutzers ihn unterstützt:
if (typeof(Worker) !== "undefined") {
// Ja! Unterstützung für Web-Worker!
// Etwas Code.....
} else {
// Entschuldigung! Keine Web Worker-Unterstützung..
}
Erstellen Sie eine Web-Worker-Datei
Jetzt erstellen wir unseren Web-Worker in einem externen JavaScript.
Hier erstellen wir ein Skript, das zählt. 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() – die verwendet wird, um eine Nachricht zurück auf die HTML-Seite zu posten.
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 existiert. 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 werden in gespeichert event.data.
Beenden Sie einen Web Worker
Wenn ein Web-Worker-Objekt erstellt wird, wartet es weiterhin auf Nachrichten (auch nachdem das externe Skript abgeschlossen ist), bis es beendet wird.
Um einen Web-Worker zu beenden und Browser-/Computerressourcen freizugeben, verwenden Sie die Methode terminate():
w.terminate();
Den Web Worker wiederverwenden
Wenn Sie die Worker-Variable nach ihrer Beendigung auf undefiniert setzen, können Sie den Code wiederverwenden:
w = undefined;
Vollständiges 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>
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 = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Try it Yourself »
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
