HTML5-Web Worker APIs的代码详解-H5教程

1.概述
HTML5 Web Worker可以使Javascript程序在后台单线程执行大量耗时的计算任务。Web Worker在执行时不能直接访问DOM。Web Worker也会消耗CPU和系统资源。Web Worker与页面间的通信可以通过Web Worker的方法postMessage和message事件。

2.浏览器支持检测

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

3.worker对象
worker对象是window对象的子对象，它有下面几个方法：
•Worker(jsFile_URL)：构造函数，参数是一个用于执行Web Worker任务的JavaScript文件的URL地址，可以是相对或绝对地址。可以递归建立worker。在页面调用。
•terminate()：终止worker，终止后不能再重用，只能重建。
在页面调用。
•close()：终止worker，在Worker内调用。
•importScripts(jsFile_1_URL, jsFile_2_URL, ... )：异步地向一个已存在的worker导入JavaScript文件，JavaScript的按照参数的顺序执行。在Worker脚本内部调用。
•postMessage(msg)：创建werker的页面与worker之间通信的方法，例如：

    // -------------由页面向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.错误处理

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

5.使用定时器
尽管worker不能直接访问DOM中的对象，但可以完全使用window对象中与时间有关的方法和属性，也可以使用部分其他属性。如：

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

以上就是HTML5-Web Worker APIs的代码详解的详细内容，更多请关注二当家的素材网其它相关文章！