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');
<p>worker.postMessage({ type: 'start', data: [1, 2, 3, 4, 5] });</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/9331" title="情感家园企业站5.0 多语言多风格版"><img
src="https://img.php.cn/upload/webcode/000/000/014/175868640629271.png" alt="情感家园企业站5.0 多语言多风格版" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/9331" title="情感家园企业站5.0 多语言多风格版">情感家园企业站5.0 多语言多风格版</a>
<p>一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！</p>
</div>
<a href="/xiazai/code/9331" title="情感家园企业站5.0 多语言多风格版" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p><p>worker.onmessage = function(e) {
const { type, result } = e.data;
if (type === 'done') {
console.log('计算完成:', result); // 15
}
};</p><p>/<em> calc-worker.js </em>/
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;
<p>const worker = new Worker('./counter-worker.js');
worker.postMessage({ buffer });</p><p>// 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 等待型操作。
