Web Workers是浏览器提供的后台线程机制，用于执行计算密集型任务而不阻塞主线程；其运行于独立线程、内存隔离、通过postMessage通信、不可访问DOM、支持importScripts。
Web Workers 是浏览器提供的多线程机制，让 JavaScript 能在后台线程中运行脚本，不阻塞主线程（即页面 UI 和用户交互）。它不是“真正的多线程”（JS 本身仍是单线程），而是通过隔离的执行环境实现并发任务处理。
Web Worker 的核心特点
– 运行在独立线程，与主线程内存隔离（不能直接访问 document、window、DOM）
– 通过 postMessage() 和 onmessage 与主线程通信（仅支持结构化克隆，不能传函数或 DOM 节点）
– 支持加载外部脚本（importScripts()），可复用逻辑
– 无法操作 UI，适合计算密集型任务（如数据解析、加密、图像处理、大数组排序）
如何创建一个基本的 Web Worker
分两步：写 Worker 脚本 + 在主线程中实例化
1. 创建 worker.js 文件（后台线程逻辑）：
// worker.js
self.onmessage = function(e) {
const data = e.data;
// 模拟耗时计算
let result = 0;
for (let i = 0; i < data * 1e7; i++) {
result += i;
}
self.postMessage({ result });
};
2. 主线程中启动并通信：
立即学习“Java免费学习笔记（深入）”；
// main.js
const worker = new Worker('worker.js');
<p>worker.onmessage = function(e) {
console.log('Worker 返回结果：', e.data.result);
};</p><p>worker.postMessage(10); // 向 worker 发送数据</p>使用注意事项和常见技巧
– 路径必须同源：Worker 脚本地址需符合同源策略（不能是 data: 或 blob: 除非用 Blob URL）
– 错误捕获：用 worker.onerror 监听运行时错误（如脚本 404、语法错误）
– 终止 Worker：调用 worker.terminate() 立即销毁，释放资源
– 复用脚本：Worker 内可用 importScripts('lib.js', 'utils.js') 加载多个依赖
– 避免频繁通信：消息传递有开销，大对象建议分块或用 Transferable（如 ArrayBuffer）提升性能
高级用法：内联 Worker（Blob URL）
适合简单逻辑或动态生成代码，避免额外文件请求：
const code = `
self.onmessage = e => {
self.postMessage('Hello from inline worker: ' + e.data);
}
`;
const blob = new Blob([code], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
worker.onmessage = e => console.log(e.data);
worker.postMessage('World');
基本上就这些。Web Workers 不复杂但容易忽略通信模型和作用域限制——记住“不能碰 DOM，只能发消息”，就能避开大部分坑。
