前言

在Web开发中，JavaScript的单线程特性常常成为性能瓶颈。当我们遇到需要大量计算的场景时（如图像处理、数据分析等），Web Worker 就成为了关键的解决方案。本文将通过一个完整示例，带你快速掌握Web Worker的使用方法。

一、什么是Web Worker？

Web Worker是浏览器提供的JavaScript多线程解决方案，它允许我们在后台线程中运行脚本，与主线程并行执行。关键特性：

• 独立全局上下文
• 无法直接操作DOM
• 通过消息机制通信
• 支持传递可序列化数据

什么时候用 Web Worker？

适合：

• 计算密集型任务（如加密、数据处理）
• 长时间运行的任务（如 WebSockets、消息队列）
• 渲染优化（如复杂动画、WebGL）

不适合：

• 需要操作 DOM
• 轻量级任务（可能带来额外线程管理成本）

二、创建worker进程

1、创建子进程

import xxxx from 'xxxxx';

self.onmessage = event => {
  // event.data 父进程发给子进程数据
  console.log(event.data);  // hello
  // 子进程操作
  ...
  // 返回数据给父进程
  postMessage('sub end');
}

2、创建父进程

  // 创建父进程，vite需要用new URL，如果子进程有import，需要设置类型为module
  const worker = new Worker(new URL('./diffWorker.ts', import.meta.url), {
    type: 'module' // 关键：指定为模块类型
  });
  // 监听子系统返回值
  worker.onmessage = event => {
    console.log(event.data);  // sub end
  }
  // 向子进程发送数据
  worker.postMessage('hello');

3、关闭worker

  //主线程关闭
  worker.terminate();
  //子线程关闭
  self.close();

三、Worker 线程中的限制

• 不能操作 DOM（不能使用 document、window）
• 不能直接访问本地存储（localStorage、sessionStorage）
• 可以使用 fetch、WebSockets 等进行网络请求
• 可以使用 setTimeout / setInterval（但不推荐）