HTML 5-Web-Worker

Web Worker ist JavaScript, das im Hintergrund ausgeführt wird und die Leistung der Seite nicht beeinträchtigt.

Was ist ein Web Worker?

Beim Ausführen eines Skripts in einer HTML-Seite ist der Status der Seite nicht reaktionsfähig, bis das Skript abgeschlossen ist.

Web Worker ist JavaScript, das im Hintergrund unabhängig von anderen Skripten ausgeführt wird und die Leistung der Seite nicht beeinträchtigt. Sie können weiterhin tun, was Sie wollen: Klicken, Auswählen usw., während der Web-Worker im Hintergrund ausgeführt wird.

Browser-Unterstützung

Web Worker werden von allen gängigen Browsern außer Internet Explorer unterstützt.

HTML5 Web Workers-Instanz

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

Zählung:

Web-Worker-Unterstützung erkennen

Bevor Sie einen Web-Worker erstellen, prüfen Sie bitte, ob der Browser des Benutzers ihn unterstützt:

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

Web-Worker-Datei erstellen

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

Hier erstellen wir das Zählskript. 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 postMessage()-Methode – sie wird verwendet, um eine Nachricht zurück an die HTML-Seite zu senden.

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

Web-Worker-Objekt erstellen

Wir haben bereits die Web-Worker-Datei, jetzt müssen wir sie von der HTML-Seite aus aufrufen.

Der folgende Code erkennt, ob der Worker existiert. Wenn nicht, erstellt er ein neues Web-Worker-Objekt und führt dann den Code in „demo_workers.js“ aus:

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

Dann können wir es jetzt tun Senden und Empfangen von Nachrichten vom Web-Worker.

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 übermittelt, wird der Code im Ereignis-Listener ausgeführt. event.data enthält Daten aus event.data.

Beenden des Web Workers

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

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

w.terminate();

Vollständiger Web Worker-Beispielcode

Wir haben das gesehen Worker-Code in der .js-Datei. Hier ist der Code für die HTML-Seite:

Instanz

   
Count numbers: 
 Start Worker
 Stop Worker 

 <script> var w; function startWorker() { 
 if(typeof(Worker)!=="undefined") { if(typeof(w)==&quot;undefined&quot;) { w=new Worker(&quot;demo_workers.js&quot;); } 
 w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } 
 else 
 { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } 
 } 
 function stopWorker() { w.terminate(); } 
 </script> 
 
  

Web Worker und DOM

Da sich die Web Worker in externen Dateien befinden, können sie nicht auf das folgende JavaScript zugreifen Objekte:

Fensterobjekt

Dokumentobjekt

Übergeordnetes Objekt

Das Obige ist der Inhalt von HTML 5 Web Workers. Für weitere verwandte Inhalte zahlen Sie bitte Achtung auf die chinesische PHP-Website (m.sbmmt.com)!