Detaillierte Code-Erklärung der HTML5-Web Worker-APIs

1. Übersicht
HTML5 Web Worker kann Javascript-Programmen ermöglichen, eine große Anzahl zeitaufwändiger Berechnungsaufgaben in einem einzigen Thread im Hintergrund auszuführen. Web Worker können während der Ausführung nicht direkt auf das DOM zugreifen. Web Worker verbrauchen außerdem CPU- und Systemressourcen. Die Kommunikation zwischen dem Web Worker und der Seite kann über die Web Worker-Methoden postMessage und messageevent erfolgen.

2. Browser unterstützt Erkennung

 function loadDemo() 
   { 
      
if
 (typeof(Worker) !== "undefined") 
      { 
         
document
.getElementById("support").innerHTML =  
            "Excellent! Your browser supports HTML5 Web Workers"; 
      } 
   }

3. Workerobjekt Das Workerobjekt ist ein untergeordnetes Objekt des
Fensterobjekts Objekt, das über die folgenden Methoden verfügt: •Worker(jsFile_URL): Konstruktor, der Parameter ist die URL-Adresse einer JavaScript-Datei, die zum Ausführen von Web Worker-Aufgaben verwendet wird, wobei es sich um eine relative oder absolute Adresse handeln kann. Worker können rekursiv erstellt werden. Auf der Seite aufgerufen.
•terminate(): Beenden Sie den Worker. Nach der Beendigung kann er nicht wiederverwendet, sondern nur neu erstellt werden.
Auf der Seite anrufen.
•close(): Beendet den Worker, aufgerufen innerhalb des Workers.
•importScripts(jsFile_1_URL, jsFile_2_URL, ...): JavaScript-Dateien asynchron in einen vorhandenen Worker importieren. JavaScript wird in der Reihenfolge der Parameter ausgeführt. Wird im Worker-Skript aufgerufen.
•postMessage(msg): Erstellen Sie eine Kommunikationsmethode zwischen der Seite des Arbeiters und dem Arbeiter, zum Beispiel:

    // -------------由页面向worker
发送消息
------------------
      document.getElementById("helloButton").
onclick
 = function() { 
         worker.postMessage("Here's a message 
for
 you"); 
      }
      // -------------页面接收来自worker的消息----------------      
      worker.addEvent
List
ener("message", messageHan
dl
er, true); 
      function messageHandler(e) { 
         // process message from worker 
      } 
      // -------------JavaScript
文件处理
来自页面的消息----------------
      addEventListener("message", messageHandler, true);
      function messageHandler(e) { 
         postMessage("worker says: " + e.data + " too"); 
      }

4.

Fehlerbehandlung

 // -------------在页面处理来自worker的消息----------------
   worker.addEventListener("error", errorHandler, true);
   function errorHandler(e) { 
      console.log(e.message, e); 
   }

5. Verwenden Sie

Timer Obwohl der Worker nicht direkt auf Objekte im DOM zugreifen kann, kann er die zeitbezogenen Methoden und
Eigenschaften im Fensterobjekt, einige andere Attribute können ebenfalls verwendet werden. Zum Beispiel:

Das obige ist der detaillierte Inhalt vonDetaillierte Code-Erklärung der HTML5-Web Worker-APIs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!