html5中的web worker用法


html5 web worker相当于在主线程下有开了一个子线程,可以在后台运行子线程而不影响页面相应。


if(typeof(Worker)!=="undefined")

{

if(typeof(w)=="undefined")

{

 var w=new Worker("demo_test.js");

 work.onmessage=function(event)d

{

document.getElementById("hint").innerHTML=event.data;

}

}

}

else

{

document.getElementById("hint").innerHTML="web worker is not supported by this browser!";

}


web worker的常用api

postMessage()用于主线程与子线程的相互通信。

主线程传递给子线程:w.postMessage();

子线程传递给主线程:postMessage();


onmessage():主线程与子线程用于监听消息;

主线程监听来之子线程的消息:w.onmessage=function(event){event.data}

子线程监听来之主线程的消息:  onmessage=function(event){}


onerror()用于监听错误

w.οnerrοr=function(e)

{

e.message:错误消息

e.lineno:错误所在的行号

e.filename:错误的文件名

}


一般来说Javascript和页面的UI会共用一个线程,所以当点击一个按钮开始运行Javascript后,在这段代码运行完毕之前,页面是无法响应用户操作的,换句话来说就是被“冻结”了。而这段代码可以交给Web Worker在后台运行,那么页面在Javascript运行期间依然可以响应用户操作。后台会启动一个worker线程来执行这段代码,用户可以创建多个worker线程。所以你可以在前台做一些小规模分布式计算之类的工作,不过Web Worker有以下一些使用限制:

  • Web Worker无法访问DOM节点;
  • Web Worker无法访问全局变量或是全局函数;
  • Web Worker无法调用alert()或者confirm之类的函数;
  • Web Worker无法访问window、document之类的浏览器全局变量;

不过Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数,也可以使用XMLHttpRequest对象来做Ajax通信。


相关链接:


浅谈web worker


关于Web Worker你必须知道的7件事


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web WorkerHTML5 标准新增的 API,可以让 JavaScript 脚本在后台线程运行,不会阻塞主线程,从而提高网页的响应速度和性能。 Web Worker 的使用步骤如下: 1. 创建一个 worker 文件,可以是 JavaScript 文件或者 HTML 文件。 2. 在主线程通过 JavaScript API 创建 Worker 实例。 ```javascript var worker = new Worker('worker.js'); ``` 3. 主线程通过 postMessage 方法向 worker 发送数据。 ```javascript worker.postMessage({ type: 'calc', data: [1, 2, 3, 4, 5] }); ``` 4. worker 内部通过 onmessage 事件接收主线程发送的数据,并进行处理。 ```javascript self.addEventListener('message', function(event) { var data = event.data; if (data.type === 'calc') { var result = data.data.reduce((a, b) => a + b, 0); self.postMessage({ type: 'result', data: result }); } }); ``` 5. worker 通过 postMessage 方法向主线程发送数据。 ```javascript self.postMessage({ type: 'result', data: result }); ``` 6. 主线程通过 onmessage 事件接收 worker 发送的数据,并进行处理。 ```javascript worker.addEventListener('message', function(event) { var data = event.data; if (data.type === 'result') { console.log('sum:', data.data); } }); ``` 注意事项: 1. worker 文件的全局变量 self 表示 worker 自身。 2. worker 文件不能访问主线程的全局变量,反之亦然。 3. worker 文件不能直接操作 DOM 元素。 4. worker 文件需要通过 importScripts 方法引入其他 JavaScript 文件。 5. worker 文件需要通过 close 方法关闭自身。 6. worker 文件的代码必须是纯函数,不能有副作用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值