Web Workers 无法直接操作 DOM，因运行在独立线程且无 document、window 等 API，只能通过 postMessage 与主线程通信；支持 console、fetch、ArrayBuffer 等，不支持 localStorage、XMLHttpRequest；需注意结构化克隆限制、同源脚本要求及 SharedArrayBuffer 使用门槛。
Web Workers 不能直接操作 DOM
这是最常踩的坑：试图在 Worker 里调用 document.getElementById 或修改 innerHTML，会立刻报错 ReferenceError: document is not defined。Worker 运行在独立线程，没有全局 window、document、alert 等浏览器 API。
只能通过 postMessage 和主线程通信，把计算结果传回去，由主线程负责更新界面。
- Worker 内可用：
console、setTimeout、fetch、JSON、ArrayBuffer、WebAssembly - Worker 内不可用：
document、window、localStorage（但可用indexedDB）、XMLHttpRequest（推荐用fetch） - 主线程创建 Worker 必须是同源脚本，不能是
data:或内联blob:URL（除非显式用Blob+URL.createObjectURL）
如何正确创建和通信：主线程与 Worker 的双向 postMessage
通信靠 postMessage + onmessage，注意参数会被结构化克隆（structuredClone），函数、DOM 节点、undefined 会被丢弃。
/* main.js */
const worker = new Worker('./calc-worker.js');
worker.postMessage({ type: 'start', data: [1, 2, 3, 4, 5] });
立即学习“Java免费学习笔记（深入）”；
情感家园企业站5.0 多语言多风格版
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
下载
worker.onmessage = function(e) {
const { type, result } = e.data;
if (type === 'done') {
console.log('计算完成:', result); // 15
}
};
/ calc-worker.js /
self.onmessage = function(e) {
const { type, data } = e.data;
if (type === 'start') {
const sum = data.reduce((a, b) => a + b, 0);
self.postMessage({ type: 'done', result: sum });
}
};
- 主线程中用
new Worker('./xxx.js')，路径必须是相对或绝对 URL（不能是模块路径，如./worker.ts） - Worker 内用
self.postMessage()发送，用self.onmessage = ...接收（self指向 Worker 全局作用域） - 若需传大量数据（如图像像素），用
postMessage(data, [transferList])零拷贝转移ArrayBuffer，避免复制开销
SharedArrayBuffer + Atomics 实现真正共享内存（需 HTTPS + Cross-Origin-Isolated）
普通 Worker 间数据靠拷贝，SharedArrayBuffer 允许主线程与 Worker 直接读写同一块内存，但启用门槛高：
- 页面必须开启
cross-origin-isolated：响应头需含Cross-Origin-Embedder-Policy: require-corp和Cross-Origin-Opener-Policy: same-origin - 现代 Chrome/Firefox 支持，Safari 仍不支持
Atomics.wait等高级同步原语 -
SharedArrayBuffer本身不带锁，必须配合Atomics操作（如Atomics.add、Atomics.wait）防止竞态
// 主线程 const buffer = new SharedArrayBuffer(8); const sabView = new Int32Array(buffer); sabView[0] = 0;const worker = new Worker('./counter-worker.js'); worker.postMessage({ buffer });
// counter-worker.js self.onmessage = function(e) { const view = new Int32Array(e.data.buffer); Atomics.add(view, 0, 1); // 原子加 1 Atomics.notify(view, 0); // 唤醒等待者 };
常见错误：Worker 报错不显示在主线程控制台
Worker 内抛出未捕获异常（如 ReferenceError、TypeError）默认静默，不会触发主线程的 window.onerror，也看不到堆栈。
- 务必在 Worker 内加
self.onerror = console.error或自定义上报 - 开发时用
chrome://inspect→ “Remote Target” 找到你的 Worker，可断点调试 - 构建工具（如 Webpack/Vite）打包 Worker 时，需配置
worker: { type: 'module' }才能支持import语法；否则只能用importScripts() - Vite 中动态引入 Worker 要写成
new Worker(new URL('./worker.js', import.meta.url), { type: 'module' })
多线程不是银弹：Worker 启动有开销（约几毫秒），频繁创建销毁反而更慢；适合 CPU 密集型任务（加密、解析大 JSON、Canvas 像素处理），不适合简单逻辑或 I/O 等待型操作。
