Web Worker

参考资料

• Vite: Web Workers
• 阮一峰：Web Worker 使用教程
• 一文彻底了解Web Worker
• Vite项目中使用Web Worker

是什么？

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。

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

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

什么时候用？

计算的运算时长 - 通信时长 > 50ms，推荐使用Web Worker

怎么用？

一张图就能讲明白：

具体怎么用？

• 首先建一个worker.js文件

  let timer:any = null
  const now1 = performance.now()
  let count = 0
  
  const interval = () => {
    timer = setInterval(() => {
  	count++
  	const now2 = performance.now()
  	postMessage(count)
  	console.log("误差值：", now2 - now1 - 1000 * count)
    }, 1000)
  }
  
  onmessage = function (event) {
    const { data } = event
    console.log('🚀 ~ data:', data)
    if (data === "start") {
  	interval()
    }
    if (data === "stop") {
  	clearInterval(timer)
  	timer = null
  	this.postMessage("ended")
    }
    if (data === "calc") {
  	// onmessage获取传入的初始值
  	let sum = 1;
  	for (let i = 0; i < 200000; i++) {
  	  for (let i = 0; i < 10000; i++) {
  		sum += Math.random()
  	  }
  	}
  	// 将计算的结果传递出去
  	this.postMessage(sum);
    }
  }
  

• 使用Web Worker：
  基于vite+vue3的项目，我们需要引入文件，并给后缀注明为worker类型

  import MyWorker from "@/utils/worker.js?worker"
  

  对导入内容进行实例化（注册）

  const worker = new MyWorker()
  

  发送消息：

  // 开始线程
  const startWorker = () => {
    worker.postMessage("start")
  }
  

  接收消息：

  // 监听消息
  worker.onmessage = e => {
    // 获取计算结束的时间
    let end = performance.now()
    // 得到总的计算时间
    let durationTime = end - start
    console.log('计算结果:', e.data)
    console.log(`代码执行了 ${durationTime} 毫秒`)
    count.value = e.data
  }
  

注意点有什么？

Web Worker 有以下几个使用注意点。

• 同源限制
  分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
• DOM 限制
  Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。
• 通信联系
  Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。
• 脚本限制
  Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
• 文件限制
  Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

场景补充说明

遇到大数据，第一反应: 为什么不让后端去计算呢？
这里比较特殊，表格4000行，25列

• 用户可以对表格进行灵活操作，比如删除任何行或列，选择或剔除任意行
• 用户可以灵活选择运算的类型，计算一个或多个

即便是让后端计算，需要把大量数据传给后端，计算好再返回，这个时间也不短，还可能出现用户频繁操作，接口数据被覆盖等情况

总结

Web Worker为前端带来了后端的计算能力，扩大了前端的业务边界；
可以实现主线程与复杂计运算线程的分离，从而减轻了因大量计算而造成UI阻塞的情况；
不短，还可能出现用户频繁操作，接口数据被覆盖等情况