HTML5-Web Worker APIs的代码详解

百变鹏仔 2个月前 (10-18) #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&#39;s a message for you");       }      // -------------页面接收来自worker的消息----------------            worker.addEventListener("message", messageHandler, 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 = setTimeout(postMessage, 2000, "delayed message");

文章推荐

HTML5-Web Worker APIs的代码详解

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集