前端多线程之web worker在vue3中使用

🌟 简介

🌟 关键概念及注意事项

🌟 使用场景

🌟 项目使用及渲染

一、webworker简介

Web Workers（包括Dedicated Workers和Shared Workers）是HTML5提供的一种API，允许在浏览器后台线程中执行JavaScript脚本，以提高网页的性能和响应速度

二、关键概念及注意事项

名词解释：

postMessage：发送数据给worker/主线程

onmessage： 接收数据

onerror：异常捕获

terminate: 终止work

独立的全局上下文： 每个 Web Worker 都有自己独立的全局上下文，与主线程中的全局上下文是分离的。这意味着在 Web Worker 中定义的变量和函数不会影响主线程中的环境，反之亦然。
通信： 主线程和 Web Worker 之间通过消息进行通信。可以使用 postMessage 方法发送消息，并在两者之间建立双向通信。消息传递是通过拷贝而不是共享对象来完成的，确保数据的安全性。
不能访问 DOM： Web Workers 不能直接访问 DOM，这意味着不能直接操作页面上的元素。它们主要用于处理计算密集型的任务，而不是用户界面的交互。
网络请求： Web Workers 可以执行异步操作，包括发起网络请求。它们可以执行一些与网络相关的任务而不会阻塞主线程。
生命周期： Web Workers 有自己的生命周期，可以通过事件监听器（如 onmessage 和 onerror）来捕获相关事件。当不再需要一个 Web Worker 时，可以通过调用 terminate 方法来终止它。
限制： 由于 Web Workers 在独立的线程中运行，因此它们不能直接访问主线程的变量和函数。通

注意事项

同源限制：worker脚本与主进程的脚本必须遵守同源限制。他们所在的路径协议、域名、端口号三者需要相同

接口限制：window作用域下的部分方法不可使用，如DOM对象、window.alert和window.confirm等方法。可使用参考 Supported Web APIs

文件限制：无法加载本地js文件，必须使用线上。

记得关闭：worker会占用一定的系统资源，在相关的功能执行完之后，一定要记得关闭worker。
父进程中使用：worker.terminate(); 关闭；
在worker进程内部关闭 self.close();

三、使用及场景

适合计算密集型任务、io密集型任务、网络请求密集型任务、图形渲染密集型任务、视频处理密集型任务

四、vue3+vite+ts使用web worker

//主线程
import Worker from './worker?worker';//?worker 标识是worker文件

const worker = new Worker();

worker.postMessage('hello world!');

worker.onmessage = (e) => {
    console.log(e.data, 89);
};



// worker.js
onmessage = function() {
    console.log(123);
        let count = 0;
  for (let i = 0; i < 1e9; i++) {
    count += i;
  }
    postMessage(count);
}


// Vite会转换 worker.js 文件为
export default function WorkerWrapper() {
  return new Worker("/importassets/work.js?worker_file", {
    type: "module",
  });
}