Web Workers-API
Ein Webworker ist ein JavaScript, das im Hintergrund ausgeführt wird, ohne die Leistung der Seite zu beeinträchtigen.
Was ist ein Webworker?
Beim Ausführen von Skripts in einer HTML-Seite reagiert die Seite nicht mehr, bis das Skript beendet ist.
Ein Webworker 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 Webworker im Hintergrund läuft.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die ersten Browserversionen an, die Web Workers 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 Webworker
Das folgende Beispiel erstellt einen einfachen Webworker, der im Hintergrund Zahlen zählt:
Beispiel
Überprüfen Sie den Web Worker-Support
Überprüfen Sie vor dem Erstellen eines Web Workers, ob der Browser des Benutzers dies unterstützt:
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 wird 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 postMessage()Methode, die verwendet wird, um eine Nachricht zurück an die HTML-Seite zu senden.
Hinweis: Normalerweise werden Webworker nicht für solch einfache Skripte verwendet, sondern für CPU-intensivere Aufgaben.
Erstellen Sie ein Web-Worker-Objekt
Jetzt, da wir die Web-Worker-Datei haben, müssen wir sie von einer HTML-Seite aufrufen.
Die folgenden Zeilen prüfen, ob der Worker bereits existiert, falls nicht – es erstellt ein neues Webworker-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 vom Webworker senden und empfangen.
Fügen Sie dem Webworker einen "onmessage"-Ereignis-Listener hinzu.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Wenn der Webworker eine Nachricht postet, wird der Code im Ereignis-Listener ausgeführt. Die Daten des Webworkers werden in event.data gespeichert.
Einen Web Worker kündigen
Wenn ein Web-Worker-Objekt erstellt wird, wartet es weiterhin auf Nachrichten (auch nachdem das externe Skript beendet ist), bis es beendet wird.
terminate()Verwenden Sie die Methode , um einen Webworker zu kündigen und Browser-/Computerressourcen freizugeben
:
w.terminate();
Verwenden Sie den Web Worker erneut
Wenn Sie die Worker-Variable auf undefiniert setzen, nachdem sie beendet wurde, können Sie den Code wiederverwenden:
w = undefined;
Vollständiger Beispielcode für Web Worker
Wir haben bereits den Worker-Code in der .js-Datei gesehen. Unten ist der 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>
Web Worker und das DOM
Da sich Webworker in externen Dateien befinden, haben sie keinen Zugriff auf die folgenden JavaScript-Objekte:
- Das Fensterobjekt
- Das Dokumentobjekt
- Das übergeordnete Objekt