webworker 入门教程

参考（阮一峰的网络日志）：https://www.ruanyifeng.com/blog/2018/07/web-worker.html

Web Worker 的作用：

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

1 webworker的注意事项

文件来源限制：webworker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。
同源限制：webworker 线程必须是和主线程的同源文件
DOM限制： webworker不能使用window上的dom操作，也不能获取dom对象，dom相关的东西只有主线程有，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。
传递限制： 有些东西是无法通过主线程传递给子线程的，比如：方法、dom节点、一些对象里的特殊设置(freeze、getter、setter，所以vue的响应式对象是不能传递的)

2 demo

在vue项目中，模拟使用webworker处理复杂计算

首先，由于webworker不能使用本地文件，必须是网络上的同源文件

我们将包含计算的文件 woker1.js，放入 public 目录下，就可以使用 http://localhost:8080/woker1.js 来访问

2.1 主线程

主线程可以是一个 vue 文件，我们在 vue 文件中，创建子线程 webwoker

主线程采用 new 命令，调用 Worker() 构造函数，新建一个 Worker 线程。

由于 Worker 不能读取本地文件，所以这个脚本必须来自网络

javascript 复制代码

let worker1 = new Worker('http://localhost:8080/woker1.js')

然后添加一个监听，当子线程计算结束后，向主线程传递计算结果，通过message事件触发，在 e.data 变量中拿到结果，并关掉子线程。

javascript 复制代码

worker1.addEventListener('message', (e) => {
  console.log(e.data)
  worker1.terminate();  // Worker 完成任务以后，主线程就可以把它关掉。
})

或者线程通过worker.onmessage指定监听函数，接收子线程发回来的消息

javascript 复制代码

worker.onmessage = function (e) {
  // .....
}

2.2 子线程

子线程 woker1.js 中模拟计算

javascript 复制代码

const a = 1 + 1;

当计算结束后，将计算结果返回给主线程

.postMessage() 方法的参数，就是子线程传给主线程的数据

javascript 复制代码

self.postMessage(a)

其中，self 代表子线程自身，即子线程的全局对象

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

javascript 复制代码

importScripts('script1.js');