Web worker异步相关

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

1.1 使用限制

（1）同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）DOM 限制 （这点限制很大）

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以使用navigator对象和location对象。

如果需要操作dom可以返回请求的数据然后在外赋值

（3）全局对象限制

Worker 的全局对象WorkerGlobalScope，不同于网页的全局对象Window，很多接口拿不到。比如，理论上 Worker 线程不能使用console.log，因为标准里面没有提到 Worker 的全局对象存在console接口，只定义了Navigator接口和Location接口。不过，浏览器实际上支持 Worker 线程使用console.log，保险的做法还是不使用这个方法。

（4）通信联系

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（5）脚本限制

Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（6）文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

2 基本用法

2.1 主线程

浏览器原生提供Worker()构造函数，用来供主线程生成 Worker 线程。

var worker = new Worker(jsUrl, options)

 Worker()构造函数，可以接受两个参数。第一个参数是脚本的网址（必须遵守同源政策），该参数是必需的，且只能加载 JS 脚本，否则会报错。第二个参数是配置对象，该对象可选。它的一个作用就是指定 Worker 的名称，用来区分多个 Worker 线程。

主线程调用worker.postMessage()方法，向 Worker 发消息。worker.postMessage()方法的参数，就是主线程传给 Worker 的数据。它可以是各种数据类型，包括二进制数据。

worker.postMessage({method: 'echo', args: ['Work']})

主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息。通过 event.data 可以获取 Worker 子线程发过来的数据。

worker.onmessage = function (event) {
  doSomething(event.data);
}
function doSomething() {
  ...
}

Worker 完成任务以后，主线程就可以把它关掉。

worker.terminate()

2.2 Worker 线程

Worker 线程内部需要有一个监听函数，监听message事件。通过 e.data 可以获取主线程发过来的数据。

self.addEventListener('message', function (e) {
  doSomething(e.data)
}, false)
function doSomething() {
  ...
}

上面代码中，self代表子线程自身，即子线程的全局对象。因此，等同于下面两种写法。

// 写法一
this.addEventListener('message', function (e) {
...
}, false);

// 写法二
addEventListener('message', function (e) {
  ...
}, false);

self.postMessage()方法用来向主线程发送消息。

self.postMessage(...)

Worker 也可以关闭自身

self.close()

2.3 Worker 加载脚本

Worker 内部如果要加载其他脚本，有一个专门的方法importScripts()。

importScripts('script1.js')

该方法可以同时加载多个脚本。

importScripts('script1.js', 'script2.js');

该方法可以同时加载多个脚本。

importScripts('script1.js', 'script2.js');

2.4 错误处理

主线程可以监听 Worker 是否发生错误。如果发生错误，Worker 会触发主线程的error事件。Worker 内部也可以监听error事件。

worker.addEventListener('error', function (event) {
   console.log(
    'ERROR: Line ', event.lineno, ' in ', event.filename, ': ', event.message
  )
});

 转于： Web Worker入门及在 Vue 中如何使用 - 掘金

3. 实战场景

个人觉得，Web Worker我们可以当做计算器来用，需要用的时候掏出来摁一摁，不用的时候一定要收起来~

1. 加密数据
   有些加解密的算法比较复杂，或者在加解密很多数据的时候，这会非常耗费计算资源，导致UI线程无响应，因此这是使用Web Worker的好时机，使用Worker线程可以让用户更加无缝的操作UI。
2. 预取数据
   有时候为了提升数据加载速度，可以提前使用Worker线程获取数据，因为Worker线程是可以是用 XMLHttpRequest 的。
3. 预渲染
   在某些渲染场景下，比如渲染复杂的canvas的时候需要计算的效果比如反射、折射、光影、材料等，这些计算的逻辑可以使用Worker线程来执行，也可以使用多个Worker线程，这里有个射线追踪的示例。
4. 复杂数据处理场景
   某些检索、排序、过滤、分析会非常耗费时间，这时可以使用Web Worker来进行，不占用主线程。
5. 预加载图片
   有时候一个页面有很多图片，或者有几个很大的图片的时候，如果业务限制不考虑懒加载，也可以使用Web Worker来加载图片，可以参考一下这篇文章的探索，这里简单提要一下。

// 主线程
let w = new Worker("js/workers.js");
w.onmessage = function (event) {
  var img = document.createElement("img");
  img.src = window.URL.createObjectURL(event.data);
  document.querySelector('#result').appendChild(img)
}

// worker线程
let arr = [...好多图片路径];
for (let i = 0, len = arr.length; i < len; i++) {
    let req = new XMLHttpRequest();
    req.open('GET', arr[i], true);
    req.responseType = "blob";
    req.setRequestHeader("client_type", "DESKTOP_WEB");
    req.onreadystatechange = () => {
      if (req.readyState == 4) {
      postMessage(req.response);
    }
  }
  req.send(null);
}

在实战的时候注意

• 虽然使用worker线程不会占用主线程，但是启动worker会比较耗费资源
• 主线程中使用XMLHttpRequest在请求过程中浏览器另开了一个异步http请求线程，但是交互过程中还是要消耗主线程资源