Detailed code explanation of HTML5-Web Worker APIs

1. Overview
HTML5 Web Worker can enable Javascript programs to perform a large number of time-consuming calculation tasks in a single thread in the background. Web Workers cannot directly access the DOM while executing. Web Workers also consume CPU and system resources. Communication between the Web Worker and the page can be done through the Web Worker methods postMessage and messageevent.

2. Browser supports detection

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

3.workerObject
The worker object is a sub-object of the window object, It has the following methods:
•Worker(jsFile_URL): Constructor, the parameter is the URL address of a JavaScript file used to perform Web Worker tasks, which can be a relative or absolute address. Workers can be created recursively. Called on the page.
•terminate(): Terminate the worker. After termination, it cannot be reused and can only be rebuilt.
Called on the page.
•close(): Terminate the worker, called within the Worker.
•importScripts(jsFile_1_URL, jsFile_2_URL, ...): Asynchronously import JavaScript files to an existing worker. JavaScript is executed in the order of parameters. Called inside the Worker script.
•postMessage(msg): Create a method for communication between werker's page and worker, for example:

    // -------------由页面向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.Error handling

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

5. Use Timer
Although the worker cannot directly access the objects in the DOM, it can fully use the time-related methods and properties in the window object, or Use some other properties. Such as:

  var t = 
set
Time
out(postMessage, 2000, "delayed message");

The above is the detailed content of Detailed code explanation of HTML5-Web Worker APIs. For more information, please follow other related articles on the PHP Chinese website!