跳到主要内容

JS Web Workers

· 阅读需 2 分钟
素明诚
素明诚
Full stack development

什么是 Web Workers​

Worker - Web API 接口参考 | MDN## 有哪些实际用处？

Worker 线程中全局对象为 self，代表子线程自身，这时 this指向self，其上有一些 api：

  • self.postMessage: worker 线程往主线程发消息，消息可以是任意类型数据，包括二进制数据
  • self.close: worker 线程关闭自己
  • self.onmessage: 指定主线程发 worker 线程消息时的回调，也可以self.addEventListener('message',cb)
  • self.onerror: 指定 worker 线程发生错误时的回调，也可以 self.addEventListener('error',cb)

优点​

  1. 可以通过Web Workers把需要大量计算的工作交接给worker处理，不占用主线程。
  2. 通过postMessage和onmessage进行信息的传递和接收。

主线程与 Worker 之间传递的数据是通过拷贝完成的，而传址来完成的。传递给 Worker 的对象需要经过序列化，接下来在另一端还需要反序列化。页面与 Worker 不会共享同一个实例，最终的结果就是在每次通信结束时生成了数据的一个副本。

也就是说，Worker 与其主页面之间只能单纯的传递数据，不能传递复杂的引用类型：如通过构造函数创建的对象等。并且，传递的数据也是经过拷贝生成的一个副本，在一端对数据进行修改不会影响另一端。

缺点

  1. worker 不支持跨域请求
  2. worker不能访问document和window，但是可以获取navigator、location(只读)、XMLHttpRequest、setTimeout等浏览器 API。也可以进行AJAX请求。

多个 worker​

  1. 一个worker可以委派多个worker
// 加载其他的worker
importScripts('...')

  1. 使用terminate()可以终止worker