Web Worker 是 HTML5 提供的一种让 JavaScript 在后台线程中运行的机制，避免耗时操作阻塞页面渲染。通过 Web Worker，可以实现多线程编程，提升网页性能。
创建 Web Worker 的基本步骤
要使用 Web Worker，需将需要在后台执行的代码放入一个独立的 JavaScript 文件中，并在主脚本中创建 Worker 实例。
- 新建一个 JS 文件（如 worker.js），编写要在后台运行的逻辑
- 在主页面中使用 new Worker('worker.js') 创建 Worker 对象
- 通过 postMessage() 发送数据给 Worker
- 通过 onmessage 监听 Worker 返回的结果
- Worker 中使用 self.onmessage 接收消息，处理后用 postMessage() 返回结果
示例代码：
self.onmessage = function(e) { const num = e.data; let result = 0; for (let i = 1; i <= num; i++) { result += i; } self.postMessage(result); // 将结果返回主线程 };
Web Worker 的通信机制
主线程与 Worker 线程之间通过消息传递进行通信，不能共享变量或 DOM。所有数据传递都是复制方式（结构化克隆）。
立即学习“前端免费学习笔记（深入）”；
- 使用 postMessage(data) 发送数据，支持对象、数组、字符串等，但不能传函数或 DOM 节点
- 监听 onmessage 事件接收返回值
- 可使用 terminate() 方法终止 Worker（主线程调用）
- Worker 内部可用 close() 结束自身
处理复杂任务的实践方案
对于计算密集型任务，如图像处理、大数据计算、加密解密等，适合拆分到 Worker 中执行。
- 将大数组处理任务分块，逐块发送给 Worker 并合并结果
- 多个 Worker 可并行处理不同数据段，提升效率
- 注意：Worker 中无法访问 window、document 等全局对象，只能使用部分 API（如 setTimeout、XMLHttpRequest）
- 可通过 importScripts() 引入外部 JS 库，例如加载算法工具
例如，在 worker.js 中引入辅助库：
importScripts('crypto-utils.js'); // 加载加密库
self.onmessage = function(e) {
const encrypted = encryptData(e.data);
self.postMessage(encrypted);
};
错误处理与调试技巧
Worker 中发生错误时，会触发主线程的 onerror 回调。
示例：
worker.onerror = function(error) {
console.error('Worker 错误：', error.message);
};
基本上就这些。合理使用 Web Worker 能有效提升用户体验，尤其在处理复杂逻辑时不卡界面。注意资源管理和兼容性（IE10+ 支持），确保脚本路径正确，跨域限制也需留意。
