Web Worker是HTML5提供的多线程API，用于在后台线程运行耗时任务，避免阻塞主线程。它通过postMessage与主线程通信，不可直接操作DOM，适用于大数据计算、频繁分析等场景。
JavaScript 是单线程语言，主线程负责 DOM 操作、事件处理和脚本执行。当遇到大量计算任务时，容易造成页面卡顿。为解决这个问题，Web Worker 提供了并发执行能力，让耗时任务在后台线程运行，不阻塞用户界面。
什么是 Web Worker
Web Worker 是 HTML5 提供的浏览器多线程 API，允许 JavaScript 在后台线程中运行脚本。它独立于主线程，不会影响页面响应。Worker 通过消息机制与主线程通信，不能直接操作 DOM 或访问某些全局对象（如 window、document）。
常见使用场景：- 大数据计算（如图像处理、加密解密）
- 频繁的数据分析或排序
- 长时间轮询或后台同步
创建和使用 Web Worker
要启动一个 Worker，需将一段脚本文件作为参数创建 Worker 实例。主线程与 Worker 之间通过 postMessage 发送数据，onmessage 接收消息。
主线程代码示例：
const worker = new Worker('worker.js');
worker.postMessage('start'); // 向 Worker 发送消息
worker.onmessage = function(e) {
console.log('收到结果：', e.data);
};
worker.js 文件内容：
self.onmessage = function(e) {
const result = heavyCalculation(); // 执行耗时任务
self.postMessage(result); // 将结果返回主线程
};
function heavyCalculation() {
let sum = 0;
for (let i = 0; i < 1e9; i++) {
sum += i;
}
return sum;
}
注意通信是复制而非共享
Worker 和主线程之间传递数据采用结构化克隆（Structured Clone），意味着对象会被复制而不是共享。对于大型数组或对象，复制可能带来性能开销。
立即学习“Java免费学习笔记（深入）”；
优化建议：- 使用 Transferable Objects（如 ArrayBuffer）实现零拷贝传输
- 只传递必要数据，避免发送完整 DOM 结构或闭包
- 对频繁通信任务做节流或批量处理
const buffer = new ArrayBuffer(1024); worker.postMessage(buffer, [buffer]); // 第二个参数表示转移所有权
错误处理与终止 Worker
Worker 可能因语法错误或运行异常中断。监听 error 事件可捕获问题。任务完成后应手动关闭 Worker 释放资源。
worker.onerror = function(error) {
console.error('Worker 错误：', error.message);
};
// 使用后终止
worker.terminate();
在 Worker 内部也可调用 close() 自行关闭：
self.close();基本上就这些。Web Worker 让 JavaScript 能够实现真正的并行计算，虽然有通信隔离和上下文限制，但在合理设计下能显著提升应用性能。
