Web Workers是HTML5提供的后台线程API，用于在独立于主线程的环境中执行JavaScript脚本，避免阻塞UI。通过new Worker('worker.js')创建实例，利用postMessage传递数据，onmessage接收结果，实现主线程与Worker线程间的消息通信。Worker分为Dedicated Worker、Shared Worker和Service Worker，其中Dedicated Worker适用于单一脚本的高负载计算任务。由于线程间数据通过结构化克隆算法序列化传输，大对象传递存在性能开销，可使用Transferable Objects如ArrayBuffer实现零拷贝提升效率。Worker不能操作DOM或使用window/document等全局对象，适合处理大数据解析、图像音频分析、加密压缩等CPU密集型任务。优化建议包括减少通信频率、控制Worker数量、及时调用terminate()释放资源，以及使用type='module'支持模块化开发。尽管JavaScript为单线程，Web Workers仍提供了类多线程能力，显著提升应用响应性与性能。
JavaScript 是单线程语言，主线程负责页面渲染、事件处理和脚本执行。当遇到大量计算任务时，容易造成界面卡顿。Web Workers 提供了在后台线程中运行脚本的能力，从而避免阻塞主线程。虽然 JavaScript 本身不支持传统意义上的多线程，但 Web Workers 让我们能以“多线程”的方式提升性能。
什么是 Web Workers？
Web Workers 是 HTML5 提供的 API，允许 JavaScript 在浏览器的后台线程中运行脚本。这个线程独立于主线程，不会影响用户界面的响应性。主线程与 Worker 线程之间通过消息机制通信，彼此隔离，不能直接访问对方的作用域或 DOM。
Worker 分为以下几种类型：
- Dedicated Worker：专有 Worker，只能被创建它的脚本使用。
- Shared Worker：共享 Worker，可被同一域名下的多个脚本共享。
- Service Worker：常用于网络代理、资源缓存和离线功能，不直接参与计算。
本文主要讨论 Dedicated Worker 在复杂计算中的应用。
立即学习“Java免费学习笔记（深入）”；
如何创建和使用 Web Worker
创建一个 Worker 非常简单。首先需要一个独立的 JavaScript 文件，作为 Worker 的执行脚本。
// worker.js
self.onmessage = function(e) {
const data = e.data;
let result = 0;
for (let i = 0; i < data; i++) {
result += i;
}
self.postMessage(result);
};
然后在主线程中实例化 Worker，并发送消息：
// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
console.log('计算结果：', e.data);
};
worker.onerror = function(error) {
console.error('Worker 错误：', error.message);
};
worker.postMessage(100000000); // 发送数据到 Worker
关键点：
- 使用 new Worker(url) 创建 Worker 实例。
- 通过 postMessage() 发送数据。
- 通过监听 onmessage 接收返回结果。
- Worker 中使用 self 或全局作用域访问上下文。
数据通信与性能注意事项
主线程与 Worker 之间的通信基于“消息传递”，数据会被序列化（结构化克隆算法），这意味着对象传递存在开销。
需要注意的几点：
- 传递大型数组或对象时会有复制成本，可能影响性能。
- 可以使用 Transferable Objects（如 ArrayBuffer）实现零拷贝传输，大幅提升效率。
- 例如，传递 TypedArray 时可将其所有权转移：
const buffer = new ArrayBuffer(1024); worker.postMessage(buffer, [buffer]); // 第二个参数表示转移所有权
此时主线程不能再使用该 buffer，但传输速度极快。
不适合在 Worker 中进行的操作：
- 操作 DOM（Worker 没有 window 或 document 对象）。
- 使用 alert()、confirm() 等同步阻塞方法。
- 直接共享变量，必须通过消息通信。
实际应用场景与优化建议
Web Workers 特别适合以下场景：
- 大数据集处理（如解析大型 JSON 或 CSV）。
- 图像处理或音频分析（结合 Canvas 或 Web Audio API）。
- 加密解密、压缩解压等 CPU 密集型任务。
- 复杂数学运算（如斐波那契、素数计算）。
优化建议：
- 避免频繁通信，尽量批量传递数据。
- 合理控制 Worker 数量，过多 Worker 反而增加调度负担。
- 任务完成后调用 worker.terminate() 释放资源。
- 使用模块化 Worker（Chrome 支持 type="module"）便于管理依赖。
const worker = new Worker('worker.js', { type: 'module' });
基本上就这些。Web Workers 虽然不能完全替代多线程编程模型，但在前端工程中已是解决卡顿问题的重要手段。合理使用，能让应用更流畅、响应更快。
