Home > Web Front-end > H5 Tutorial > Detailed code explanation of HTML5-Web Worker APIs

Detailed code explanation of HTML5-Web Worker APIs

黄舟
Release: 2017-04-01 11:28:24
Original
1575 people have browsed it

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"; 
      } 
   }
Copy after login

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"); 
      }
Copy after login

4.Error handling

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

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");
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template