概述
Js本身单线程执行,对于一部处理使用事件循环,但H5新增WebWorker允许多线程。
Js主线程创建Worker子线程,允许在后台运行。主线程和worker线程互不影响。对于计算密集型任务交予worker执行,不会阻塞更为流畅。
注意点:
- worker线程和主线程同源
- worker的全局对象与主线程不一致,无法读取DOM对象。
- worker和主线程通信限制,不在一个上下文执行环境,需要通过消息
postMessage()
完成 - worker可使用XMLHttpRequest发送AJAX请求
- worker不能打开本地文件
用法
- 主线程
var work = new Worker('work.js')//文件需来自网络
worker.postMessage()//主线程发送消息给worker线程
worker.onmessage(function(event){ //worker线程接受消息
//do something
})
worker.onerror(function(e){
//do something
})
worker.terminate()//主线程关闭
- Worker线程
importScript('xx.js')//worker内部加载脚本
self.addEventListener('message',function(e){
var data = e.data
//do something
self.postMessahe()
},false)
self.close()//worker线程关闭
self
即worker的全局对象,也可以改成this
- 数据通信
主线程与worker线程的通信是拷贝关系,传值而非传址。
若发送过大数据会产生性能问题,可采取转移控制权的方式。但转移控制权后主线程和worker线程便不可以同时修改数据。