Skip to content

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脚本

vue-worker

推荐文章

它利用了Blob来创建一个可执行的二进制上下文,在通过这个上下文来调用我们传入的function。具体源码