webWorker
Web Worker 的作用
允许主线程创建 Worker 线程,在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。通常使用Worker进行密集型计算的任务,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。 PS:Worker 线程一旦新建成功,就不会被主线程上的活动打断。
注意点
(1)同源限制
分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。
(2)DOM 限制
Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用document、window、parent这些对象。但是,Worker 线程可以navigator对象和location对象。
(3)通信联系
Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息postMessage完成。
基本使用
常用api:postMessage、onmessage
self 为worker线程的全局对象,也可以使用this或者直接省略
js
// 新建worker
let worker = new Worker('work.js')
// 与worker通信
worker.postMessage({method: 'echo', args: ['Work']})
// 监听worker完成消息后主动关闭worker
worker.onmessage = function (event) {
if(event.data === 'over') worker.terminate( ) // 关闭worker
}
// work.js // self 为worker线程的全局对象,也可以使用this或者直接省略
self.addEventListener('message', function (e) {
// 向主线程发送消息
self.postMessage('You said: ' + e.data)
}, false)
// 在work.js中使用importScripts('script1.js', 'script2.js')可以加载js脚本