Web Worker 是浏览器提供的标准多线程方案，适合将加密、大数据遍历等 CPU 密集型任务移出主线程，避免界面卡顿。
先说结论：遇到页面因计算导致滚动或点击无响应时，应优先评估任务是否可剥离至 Web Worker 运行。
- 先定位：确认耗时逻辑是否属于纯计算且不依赖 DOM 操作。
- 先做：将计算代码移至独立 JS 文件，通过 postMessage 与主线程通信。
- 再验证：任务运行期间测试页面交互是否流畅，并监控内存释放情况。
核心代码实现
Web Worker 不需要安装额外库，浏览器原生支持。核心是主线程与 Worker 线程通过消息传递数据，以下是包含具体计算逻辑的最小可用代码结构。
主线程 (main.js)：
const worker = new Worker('worker.js');
// 必须监听 error 事件，否则 Worker 内部错误会静默失败
worker.onerror = function(error) {
console.error('Worker 错误:', error.message);
};
const largeArray = new Array(1000000).fill(1);
worker.postMessage({ type: 'calculate', data: largeArray });
worker.onmessage = function(e) {
console.log('结果:', e.data);
worker.terminate(); // 任务完成后关闭
};Worker 线程 (worker.js)：
self.onmessage = function(e) {
const result = heavyCalculation(e.data);
self.postMessage(result);
self.close();
};
// 具体的耗时计算逻辑示例
function heavyCalculation(data) {
let sum = 0;
for (let i = 0; i < data.length; i++) {
// 模拟 CPU 密集型操作
sum += Math.sqrt(data[i]) * Math.sin(i);
}
return sum;
}大数据传输优化
主线程与 Worker 之间传递数据会发生结构化克隆拷贝。如果数据量大（如图片像素数组），建议在 postMessage 第二个参数传入数组，启用 Transferable Objects 转移所有权，避免内存拷贝开销。
// 主线程发送 ArrayBuffer
const buffer = new Uint8Array(1024 * 1024).buffer;
// 第二个参数指定转移对象，发送后主线程将无法访问该 buffer
worker.postMessage({ data: buffer }, [buffer]);
// Worker 接收
self.onmessage = function(e) {
const buffer = e.data.data;
// 直接使用 buffer，无需拷贝
};验证方法
1. 交互测试
触发耗时任务后，立即尝试滚动页面或点击按钮。如果页面能流畅响应，说明主线程未被阻塞。
2. 性能面板
打开浏览器开发者工具的 Performance 面板，录制任务过程。观察 Main 线程是否出现长任务（Long Task），同时确认 Worker 线程是否有独立的执行记录。
3. 控制台日志
在 Worker 内部和主线程分别打印日志，确认消息收发顺序符合预期，且没有报错。
常见坑
1. 数据传输成本
数据传输存在序列化开销，对于大二进制数据，建议直接使用 Transferable Objects 避免内存拷贝（参考 MDN 文档）。
2. 无法访问 DOM
不要在 Worker 中尝试操作页面元素。如果需要更新 UI，必须将结果发回主线程，由主线程修改 DOM。
3. 错误捕获
Worker 内部的错误不会直接抛到主线程。需监听 worker.onerror 事件捕获异常，否则错误可能静默失败，导致任务无结果。
4. 定时器清理
避免在 Worker 中设置 setInterval 却不清理。推荐用一次性 setTimeout 或事件驱动，任务结束后确保定时器被清除。