本文摘自PHP中文网，作者黄舟，侵删。
1.概述
HTML5 Web Worker可以使Javascript程序在后台单线程执行大量耗时的计算任务。Web Worker在执行时不能直接访问DOM。Web Worker也会消耗CPU和系统资源。Web Worker与页面间的通信可以通过Web Worker的方法postMessage和message事件。2.浏览器支持检测
1 2 3 4 5 6 7 8 9 10 11 12 | 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之间通信的方法，例如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | // -------------由页面向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.错误处理
1 2 3 4 5 | // -------------在页面处理来自worker的消息----------------
worker.addEventListener("error", errorHandler, true);
function errorHandler(e) {
console.log(e.message, e);
}
|
5.使用定时器
尽管worker不能直接访问DOM中的对象，但可以完全使用window对象中与时间有关的方法和属性，也可以使用部分其他属性。如：
1 2 3 4 | var t =
set
Time
out(postMessage, 2000, "delayed message");
|
以上就是HTML5-Web Worker APIs的代码详解的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
解决h5网页中用video标签无法播放mp4视频的方法
畅谈HTML5 到底是什么？
HTML5表单新增元素与属性
h5前端开发是什么
HTML5多媒体audio和video详细介绍（一）
HTML5打开手机扫码功能及优缺点_HTML5教程技巧
HTML5中5大存储方式汇总
移动端h5中百度地图的click事件的介绍（代码示例）
HTML5实践-使用css3如何完成google涂鸦动画的详解
用h5的canvas做恐怖动画
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » HTML5-Web Worker APIs的代码详解
