站长资讯网
最全最丰富的资讯网站

HTML5-Web Worker APIs的代码详解

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");

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号