使用Web Worker

Web Worker是浏览器模拟了“线程”的方式在后台运行脚本。线程可以执行任务而不干扰用户主进程,也就是不影响页面,比如不会卡住。


限制:

    Web Worker中不能处理大多数DOM和BOM
    Web Worker通过消息机制和主线程通讯
    Web Worker内的全局对象作用域仅限于其本身
    Web Worker与主线程之间的对象传递是使用深拷贝的方式
    Web Worker与主线程还可以通过转让所有权(参考资料5)来传递数据
    Web Worker还可以创建子线程SubWorker
    Web Worker可以被主线程关闭,也可以自我关闭
    Web Worker也可以引入外部脚本
    Web Worker启动有较高的时间和空间成本  

专用worker

创建一个新的worker很简单。调用Worker() 的构造器,指定一个脚本的URI来执行worker线程(main.js):

var myWorker = new Worker('worker.js');
专用worker中消息的接收和发送

通过postMessage() 方法和onmessage事件处理函数生效。向一个worker发送消息需要这样做(main.js):

first.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}
在worker中接收到消息后,写这样一个事件处理函数代码作为响应(worker.js):
onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}
回到主线程,我们再次使用onmessage以响应worker回传的消息:

myWorker.onmessage = function(e) {
  result.textContent = e.data;
  console.log('Message received from worker');
}
在这里我们获取消息事件的data,就是worker返回的信息

参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers
http://blog.csdn.net/zwjabcd/article/details/50339135
http://blog.csdn.net/dojotoolkit/article/details/25030289


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值