这是一个使用Vue3 + Vite开发的WebWorker综合演示项目，旨在帮助开发者系统地学习和理解WebWorker的各种使用场景和最佳实践。
本项目展示了WebWorker的多种使用方式和应用场景：
- 基础WebWorker：通过计算斐波那契数列展示WebWorker的基本用法
- 文件处理Worker：展示如何在WebWorker中处理文件，以及使用Transferable Objects高效传输数据
- SharedWorker：演示多标签页共享Worker，实现跨标签页通信
- 服务器端Worker：使用Node.js的Worker Threads实现后端多线程处理
- 前端：Vue 3 + Vite + Vue Router
- 后端：Koa2 + Node.js Worker Threads
demo2
├── public/ # 静态资源
├── src/ # 前端源代码
│ ├── assets/ # 资源文件
│ ├── components/ # Vue组件
│ ├── router/ # 路由配置
│ ├── views/ # 页面视图
│ ├── workers/ # WebWorker文件
│ ├── App.vue # 主应用组件
│ └── main.js # 入口文件
├── server/ # 后端服务器代码
│ ├── workers/ # 后端Worker线程
│ └── worker-server.js # Koa2服务器
├── index.html # HTML入口
├── package.json # 项目配置
└── vite.config.js # Vite配置
git clone <项目地址>
cd demo2npm installcd server
npm install
cd ..npm run dev成功启动后，访问：http://localhost:5173
cd server
npm start后端服务器将运行在：http://localhost:3000
项目包含四个主要示例，可以通过主页导航或直接访问对应路由查看：
- 展示了WebWorker的基本创建和使用方法
- 通过斐波那契数列的计算对比了主线程与Worker线程的区别
- 使用方法：
- 设置要计算的斐波那契数列项数
- 分别点击"使用Worker计算"和"使用主线程计算"按钮
- 观察两种方式下UI的响应性差异
- 展示了如何在WebWorker中处理文件数据
- 演示了Transferable Objects的使用方式（高效传输大型二进制数据）
- 使用方法：
- 点击"选择图片文件"上传一张图片
- Worker会在后台处理图片（模拟处理）
- 处理完成后展示原图和处理后的图片对比
- 展示了SharedWorker的创建和使用方法
- 实现了多标签页之间的通信
- 使用方法：
- 打开页面后点击"打开多个标签页"链接
- 在不同标签页中发送消息
- 观察消息如何在多个标签页之间同步
- 展示了Node.js Worker Threads的使用方法
- 实现了后端的多线程计算，支持进度报告和任务取消
- 使用方法：
- 确保先启动了后端服务器（
cd server && npm start） - 选择计算类型（斐波那契、素数或矩阵乘法）
- 设置计算参数并点击"开始计算"
- 可以查看计算进度，并可随时取消任务
- 确保先启动了后端服务器（
// 创建Worker
const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
// 发送消息到Worker
worker.postMessage({ data: 'some data' });
// 接收Worker消息
worker.addEventListener('message', (event) => {
console.log(event.data);
});
// 终止Worker
worker.terminate();// 在发送ArrayBuffer等大型二进制数据时提高性能
const arrayBuffer = new ArrayBuffer(1024 * 1024);
worker.postMessage({ data: arrayBuffer }, [arrayBuffer]);// 创建SharedWorker
const sharedWorker = new SharedWorker('./shared-worker.js');
// 通过port通信
sharedWorker.port.start();
sharedWorker.port.postMessage('Hello');
sharedWorker.port.onmessage = (event) => {
console.log(event.data);
};// Node.js中创建Worker
const { Worker } = require('worker_threads');
const worker = new Worker('./worker.js', { workerData: { /* 初始数据 */ } });
// 监听消息
worker.on('message', (message) => {
console.log(message);
});
// 发送消息
worker.postMessage('Hello from main thread');
// 终止Worker
worker.terminate();-
浏览器兼容性：
- 大多数现代浏览器支持WebWorker
- SharedWorker的兼容性较低，在某些浏览器可能不可用
-
安全限制：
- WebWorker受同源策略限制
- 本地文件系统(
file://)协议下的Worker可能不工作，请使用HTTP服务器
-
Worker限制：
- Worker不能访问DOM
- Worker不能访问window/document对象
- Worker有自己独立的作用域
-
在Chrome开发者工具中，可以通过以下步骤调试Worker：
- 打开开发者工具
- 进入"Sources"选项卡
- 在左侧面板展开"Threads"部分
- 可以看到所有活动的Worker线程
-
对于SharedWorker，可以通过访问
chrome://inspect/#workers查看和调试
Q: 为什么我应该使用WebWorker？
A: 当你有CPU密集型任务需要处理，同时又不想阻塞UI线程时，WebWorker是理想选择。
Q: Worker和主线程如何共享数据？
A: 通过postMessage机制传递数据。对于大型数据，推荐使用Transferable Objects或SharedArrayBuffer。
Q: SharedWorker和普通Worker有什么区别？
A: 普通Worker只属于创建它的页面，而SharedWorker可以被多个页面共享，适合需要页面间通信的场景。
Q: 如何在Webpack/Vite项目中使用Worker？
A: 现代构建工具通常支持Worker，本项目展示了在Vite中的使用方法。关键是使用正确的导入方式：new Worker(new URL('./worker.js', import.meta.url))。
欢迎贡献更多WebWorker的使用示例和最佳实践！
MIT