Ein web worker - web worker ist ein JavaScript im Hintergrund ausgeführt werden , ohne die Leistung der Seite zu beeinflussen.
Was ist ein Web Worker ?
Wenn Skripts in einer HTML-Seite ausgeführt wird, wird die Seite nicht mehr reagiert, bis das Skript beendet ist.
Ein Web-Arbeiter, wie das World Wide Web Consortium (W3C) definiert und der Web Hypertext Application Technology Working Group (WHATWG), ist ein JavaScript-Skript aus einer HTML-Seite ausgeführt, die unabhängig von anderen User-Interface-Scripts im Hintergrund ausgeführt wird, dass auch wurde von der gleichen HTML-Seite ausgeführt. Web Arbeiter sind oft in der Lage Multi-Core-CPUs effektiver zu nutzen.
Überblick
Wie von WHATWG vorgesehen, sind Web-Arbeiter relativ schwergewichtige. Sie werden erwartet, langlebiger zu sein, ein hoch Anlaufleistungskosten und ein hoch pro-Instanz Speicherkosten.
Web Arbeiter sollen oder nicht zu erwarten, in großen Stückzahlen verwendet werden, da sie die Systemressourcen in Beschlag nehmen können.
Web Workers ermöglichen die gleichzeitige Ausführung der Browser-Threads und einem oder mehr JavaScript Fäden im Hintergrund ausgeführt wird. Der Browser, der einen einzelnen Thread der Ausführung folgt auf JavaScript-Programme warten müssen, um zu beenden, bevor Sie fortfahren Ausführung und dies erhebliche Zeit in Anspruch nehmen kann, die der Programmierer mögen können von dem Benutzer verbergen.
Es ermöglicht den Browser mit dem normalen Betrieb fortzusetzen, während das Skript im Hintergrund ausgeführt wird. Die Web-Worker-Spezifikation ist eine separate Spezifikation von HTML5-Spezifikation und kann mit HTML5 verwendet werden.
Es gibt zwei Arten von Web-Arbeiter: dedicated und gemeinsame Arbeiter.
Wenn Web-Arbeiter im Hintergrund läuft, sie haben keinen direkten Zugriff auf das DOM aber mit dem Dokument von Message Passing kommunizieren. Dies ermöglicht eine Multi-Threaded-Ausführung von JavaScript-Programmen.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser - Version , die vollständig unterstützt Web Workers .
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Web Workers Beispiel
Das folgende Beispiel erzeugt einen einfachen web worker - web worker , die Zahlen im Hintergrund zählen:
Überprüfen Sie Web Worker - Support
Bevor Sie eine Erstellung von web worker - web worker prüfen , ob der Browser des Benutzers unterstützt:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Erstellen einer Web Worker Datei
Jetzt wollen wir unsere schaffen web worker - web worker in einer externen JavaScript.
Hier schaffen wir ein Skript, das zählt. Das Skript wird in dem gespeicherten "/html/demo_workers.js" file:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
Der wichtige Teil des Codes über die postMessage() Methode - die verwendet wird , eine Nachricht zurück an der HTML - Seite zu schreiben.
Note: Normalerweise web workers - web workers nicht für eine solche einfache Skripte verwendet werden, aber für mehr CPU - intensive Aufgaben.
Erstellen einer Web Worker Object
Nun , da wir die haben web worker - web worker - Datei, müssen wir es von einer HTML - Seite aufzurufen.
Die folgenden Zeilen überprüft , ob der web worker - web worker "/html/demo_workers.js" web worker bereits vorhanden ist , wenn nicht - ein neues schafft web worker - web worker - Objekt und führt den Code in "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
Dann können wir Nachrichten von dem Senden und Empfangen von web worker - web worker .
Fügen Sie einen "onmessage" Ereignis - Listener auf den web worker - web worker .
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Wenn die web worker - web worker eine entsprechende Meldung aus , wird der Code innerhalb des Ereignis - Listener ausgeführt. Die Daten aus dem web worker - web worker in event.data gespeichert.
Beenden Sie einen Web Worker
Wenn ein web worker - (even after the external script is finished) web worker - Objekt erstellt wird, wird es weiterhin für Nachrichten abzuhören (even after the external script is finished) ist (even after the external script is finished) , bis sie beendet wird.
Um einen zu kündigen web worker - terminate() web worker und kostenlose Browser / Computer - Ressourcen, verwenden Sie die terminate() Methode:
w.terminate();
Reuse die Web Worker
Wenn Sie die eingestellte web worker - web worker - Variable nicht definiert, nachdem es beendet wurde, können Sie den Code wiederverwenden:
w = undefined;
Vollständige Web Worker Beispielcode
Wir haben bereits den gesehen Web Worker - Code in der .js - Datei. 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>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/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> Versuch es selber " Web Workers und der DOM
Da web workers - web workers in externen Dateien sind, haben sie keinen Zugang zu den folgenden JavaScript - Objekten:
- Das Fenster Objekt
- Das Dokument-Objekt
- Das übergeordnete Objekt