webWorks初体验 + 如何在Vue3+ts的项目中使用webWorks，实战webWorks

在开始使用Web Workers之前，首先让我们先了解一下什么是Web Workers

Web Workers 是一种在浏览器后台独立于主线程运行的 JavaScript 线程，它允许在 Web 应用程序中进行后台和长时间运行的脚本处理，而不会影响用户的界面性能。Web Workers 通过在后台线程中执行 JavaScript 脚本来实现这一点，从而避免了阻塞主线程。

为什么使用 Web Workers？

1. 提高性能：
   • 避免长时间运行的脚本导致用户界面冻结或变得无响应。
   • 允许并行执行任务，提高计算密集型任务的效率。
2. 后台处理：
   • 可以执行长时间运行的任务，如文件压缩、图像处理等，而不影响用户交互。
3. 数据处理：
   • 对于大数据集的操作非常适合使用 Web Workers，比如数据分析或复杂的算法运算。
4. 游戏开发：
   • 在游戏开发中，可以用来处理 AI 计算、物理模拟等，以保持游戏画面流畅。
5. 离线应用：
   • 可以用于处理离线存储的数据同步和其他后台任务。
6. 资源加载：
   • 加载和解析大型 JSON 文件或其他数据结构时，可以避免阻塞主线程。

但是其实在实际开发应用中，Web Workers使用的最多的应该就是在大文件分片上传对文件进行md5的计算，因为此时浏览器需要耗费大量的性能去对文件分出的每一片进行一个计算。

使用 Web Workers 的注意事项：

• 通信：主脚本和 Worker 之间通过消息传递机制进行通信。这意味着你需要发送消息给 Worker，并且 Worker 也需要能够发送消息回主脚本。
• 资源限制：虽然 Web Workers 可以帮助提高性能，但它们仍然受限于浏览器的资源限制，例如每个页面的并发 Worker 数量。
• API 支持：并非所有浏览器 API 都可以在 Worker 中使用。例如，DOM 相关的 API 通常不可用。

如何使用 Web Workers：

1. 创建 Worker：

   const worker = new Worker('worker.js');
   

2. 发送消息到 Worker：

   worker.postMessage(222);
   

3. 从 Worker 接收消息：

   worker.addEventListener('message', function(event) {
       console.log('Message received from the worker:', event.data);
   });
   

4. 关闭 Worker：

   worker.terminate();
   

5. 新建一个work.js的文件，用以交互：

   self.addEventListener('message', function(event) {
     console.log('我是worker, 我收到了', event.data);
     const result = event.data * 2;
     self.postMessage(result);
   });
   

如上是Web Workers的一个基本使用，那么假如我们想在Vue3的环境中又应该如何使用呢

其实在 Vue 3 中使用 Web Workers 与纯 JavaScript 中使用的方式基本相同。不过，由于 Vue 3 提供了一些额外的功能，例如响应式状态管理和生命周期钩子，因此我们可以利用这些特性来更好地管理 Worker 的创建和销毁。

下面我将写一个示例：我的vue文件是放在views下的，我的worker文件放在src目录下的utils文件下

<template>
  <div>
    <a-button status="danger" @click="sendWorker">我是webWorker发送者</a-button>
    <a-button status="danger" @click="stopWorker">我是webWorker停用者</a-button>
    {{ result }}
  </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from "vue";

const result = ref();
const worker = ref<Worker | null>(null);
const sendWorker = () => {
  if (!worker.value) {
    // 获取的work文件需要从根目录找下去
    worker.value = new Worker("src/utils/webWorker.js");
    // 开启webWorker监听
    worker.value.onmessage = handleWorkerMessage
  }
  // 获取本地电脑的cpu内核数目 这个的作用其实是看你的电脑可以开启多少个线程，没有的话我就写的默认6个
  const cpuNum = navigator.hardwareConcurrency || 6
  worker.value.postMessage(cpuNum);
};

const stopWorker = () => {
  if (worker.value) {
    worker.value.terminate();
    worker.value = null;
  }
};

const handleWorkerMessage = (info: MessageEvent) => {
  console.log("我是主线程，我收到了", info.data);
  result.value = info.data;
};

onUnmounted(() => {
  // 在组件卸载时确保 Worker 已经终止
  if (worker.value) {
    worker.value.terminate();
  }
});
</script>
<style scoped lang="less">
.arco-btn {
  margin-right: 10px;
}
</style>

下面是我的webWorker.js文件内容

onmessage = (event) => {
  console.log('我是worker, 我收到了', event.data);
  const result = event.data * 2;
  postMessage(result);
}

再点击按钮的时候，就可以看到我们的webWorks已经通信了

接下来文章我将讲述，在大文件分片上传的时候，如何来使用webWorks来提升我们文件分片时，使用md5

加密的速度