Web Workers 不能直接操作 DOM，因其运行在独立线程，无法访问 document、window 等主线程对象；所有 UI 交互须通过 postMessage 与主线程通信，且仅支持可序列化数据传输。
Web Workers 不能直接操作 DOM
这是最常踩的坑：Worker 脚本运行在独立线程，document、window、localStorage 等主线程专属对象在 Worker 中根本不存在。试图访问 document.getElementById 会直接抛出 ReferenceError: document is not defined。
Worker 只能做纯计算、数据处理、网络请求（fetch）、定时器（setTimeout）等不依赖页面环境的任务。所有与 UI 的交互必须通过 postMessage 和主线程通信。
- 需要渲染或修改元素？→ 主线程接收消息后操作 DOM
- 需要读取表单值？→ 主线程先读取，再
postMessage给 Worker - 想用
console.log调试？→ Worker 里可以，但输出在 DevTools 的 “Workers” 标签页，不是默认 Console
创建 Worker 的路径必须是同源且可访问的文件
不能用内联脚本或字符串生成 Worker，必须传入一个 .js 文件 URL：
// ✅ 正确：相对路径（同源）
const worker = new Worker('./math-worker.js');
// ❌ 错误：Blob URL 需额外处理，且不推荐用于简单场景
// ❌ 错误：new Worker('data:text/javascript,...') 不被所有浏览器支持
// ❌ 错误：跨域文件会触发 CORS 报错：'Access to script at ... is blocked'
常见问题：
立即学习“Java免费学习笔记（深入）”；
- 本地双击 HTML 打开（
file://协议）→ Worker 加载失败，报SecurityError；必须起本地服务（如npx serve） - Vite / Webpack 项目中，Worker 文件需放在
src下并被正确识别为模块；Vite 推荐用new Worker(new URL('./worker.js', import.meta.url), { type: 'module' })
主线程和 Worker 之间只能靠 postMessage 传递可序列化数据
postMessage 底层用结构化克隆算法（Structured Clone Algorithm），不支持函数、undefined、Symbol、Promise、RegExp、Date 对象（注意：Date 实际上会被转成毫秒时间戳，但行为不稳定，建议显式转 .getTime()）。
典型写法：
// 主线程
worker.postMessage({ action: 'calculate', data: [1, 2, 3, 4] });
worker.onmessage = (e) => {
console.log('结果:', e.data); // e.data 是纯 JSON 数据
};
// Worker 内（math-worker.js）
self.onmessage = (e) => {
const { action, data } = e.data;
if (action === 'calculate') {
const result = data.reduce((a, b) => a + b, 0);
self.postMessage({ result }); // 只能发 plain object / array / number / string / boolean
}
};
- 大数据量传输（如图像像素数组）时，用
transferable选项避免拷贝：postMessage(data, [data.buffer])，但之后主线程就无法再访问该ArrayBuffer - 不要在 Worker 里反复
postMessage小量高频数据，容易阻塞通信通道；可批量聚合后再发
Worker 生命周期和错误处理容易被忽略
Worker 实例不会自动销毁，即使任务完成也持续驻留内存。不手动 worker.terminate() 可能导致内存泄漏，尤其在 SPA 中频繁创建 Worker 的场景。
错误捕获必须分开处理：
- 主线程：监听
worker.onerror，但注意它只捕获 Worker 初始化失败（如脚本 404），不捕获运行时异常 - Worker 内：用
self.onerror = () => {...}或try/catch包裹逻辑，并主动postMessage({ error: 'xxx' })通知主线程 - 网络请求失败、
JSON.parse报错等静默失败，必须显式判断和上报
真正复杂的多线程协作（比如多个 Worker 分片处理大数组、结果归并、进度反馈）需要自己设计消息协议和状态机，原生 Worker 提供的只是通信骨架，不是“开箱即用的多线程 API”。
