Web Worker 里调用 document 会报什么错
直接报 ReferenceError: document is not defined，或者更具体点——TypeError: Cannot read property 'body' of undefined。这不是环境没加载完的问题，而是设计上就不存在。Web Worker 运行在完全独立的线程和全局上下文中，self 指向的是 WorkerGlobalScope，不是 Window。
常见错误现象：有人把页面逻辑整个搬进 Worker，比如写了个 initUI() 函数，里面用了 document.getElementById，一执行就崩；也有人试图在 Worker 里监听 click 或操作 localStorage（后者虽同源但需注意同步问题）。
- Worker 可用的全局对象只有：
self、console、fetch、setTimeout、importScripts、postMessage等有限接口 -
localStorage和indexedDB虽可访问，但localStorage是同步阻塞的，高频率读写会拖慢 Worker；indexedDB必须用异步 API（open()+onsuccess） - DOM 相关 API（
document、window、Element、CSSStyleSheet）一律不可用，连URL.createObjectURL都不行（得用self.URL）
想让 Worker 改页面，只能靠 postMessage 和主线程配合
Worker 不能碰 DOM，但可以算数据、解码图片、处理音频流、跑加密算法——然后把结果发回去，由主线程更新 UI。这是唯一合规路径，也是浏览器强制隔离的本意。
使用场景典型如：上传大文件前在 Worker 里做 SHA-256 校验，或实时音视频滤镜处理后传回 canvas 帧数据。
立即学习“前端免费学习笔记（深入）”；
- Worker 发消息用：
self.postMessage({type: 'ready', data: result}) - 主线程监听用：
worker.onmessage = (e) => { if (e.data.type === 'ready') updateDOM(e.data.data) } - 别在 Worker 里频繁
postMessage小数据（比如每毫秒发一次坐标），容易触发主线程重绘瓶颈；批量聚合再发 - 传递对象时注意：结构化克隆算法不支持函数、
undefined、RegExp、Date（会变字符串）、Error对象；复杂数据建议序列化为JSON或用Transferable（如ArrayBuffer）提升性能
SharedArrayBuffer 能绕过通信开销，但还是不能直接操作 DOM
有了 SharedArrayBuffer 和 Atomics，Worker 和主线程能共享内存、低延迟同步状态，比如共用一个 Int32Array 当信号量。但它只解决数据共享问题，不解决执行环境问题。
也就是说：你可以在 Worker 里写 sharedBuf[0] = 1，主线程轮询发现后去改 document.body.style.backgroundColor，但 Worker 自己绝不能写那句 style 修改。
- 启用
SharedArrayBuffer需服务端配Cross-Origin-Embedder-Policy: require-corp和Cross-Origin-Opener-Policy: same-origin，本地file://协议直接禁用 -
Atomics.wait()在主线程中不可用（会抛TypeError），只能在 Worker 里调用；主线程要用Atomics.notify()唤醒 - 即便共享内存，DOM 更新仍必须发生在主线程——渲染引擎线程和 JS 主线程绑定，无法拆分
替代方案：用 OffscreenCanvas 在 Worker 里画图
如果目标是“在 Worker 里绘图”，OffscreenCanvas 是目前唯一能部分绕过主线程的 DOM 相关能力。它提供 getContext('2d') 或 getContext('webgl')，且可在 Worker 中创建和绘制。
但注意：它画完的内容不会自动显示，得通过 transferToImageBitmap() 或 commit()（仅 Chrome）传回主线程，再贴到普通 <canvas></canvas> 上。
- 创建方式：
const offscreen = new OffscreenCanvas(640, 480)（Worker 内） - 绘图后传图：
const bitmap = await offscreen.transferToImageBitmap()，再用postMessage(bitmap, [bitmap])（带 transfer list）高效传送 - 兼容性差：Firefox 不支持
OffscreenCanvas的 Worker 使用；Safari 完全不支持；移动端基本不可用 - 它仍是“离屏”的——所有像素操作合法，但任何涉及布局、样式、事件、节点树的操作依然被禁止
