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的代码详解的详细内容,更多请关注php中文网其它相关文章!
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号