Web Worker中调用document会报ReferenceError: document is not defined；因WorkerGlobalScope无document、window等DOM对象。postMessage是唯一合规通信方式，需结构化克隆纯数据，大体积数据应transfer ArrayBuffer；替代DOM操作需状态抽象、OffscreenCanvas或CustomEvent解耦；SharedArrayBuffer不能绕过DOM限制。
Web Worker里调用document会报什么错
直接执行document.getElementById或document.body，会立刻抛出ReferenceError: document is not defined；如果尝试访问self.document，则得到undefined。这不是加载延迟导致的，而是WorkerGlobalScope根本没定义document——它连window、Element、CSSStyleSheet这些对象都不存在。
常见误操作包括：把页面初始化逻辑整个复制进 Worker 文件、在 Worker 里写localStorage.setItem（虽同源但同步阻塞）、试图用URL.createObjectURL（得改用self.URL.createObjectURL）。
为什么postMessage是唯一合规通信方式
Worker 与主线程之间没有共享作用域，也不能传函数、DOM 节点、Date、RegExp或Error对象。所有传递数据必须经过结构化克隆算法（structured clone），只支持纯数据类型和可转移对象（如ArrayBuffer）。
这意味着：
- Worker 只能发
{ type: 'PROCESS_DONE', payload: [1,2,3] }这类对象，不能带方法或 DOM 引用 - 主线程收到后，自己调用
document.querySelector或el.innerHTML更新 UI - 频繁发送小消息（如每帧发一次坐标）会拖慢主线程重绘，应聚合或节流
- 大体积数据（如图像像素数组）优先用
transferable参数传ArrayBuffer，避免拷贝开销
替代 DOM 操作的三种可行路径
想“在 Worker 里做 UI 相关事”，本质是重构交互模型，不是绕过限制：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
状态抽象：把按钮状态、加载进度、错误提示等都定义为可序列化的字段（如
{ id: 'upload-1', status: 'uploading', progress: 65 }），Worker 只负责计算并发出该对象 -
OffscreenCanvas：对 Canvas 高频渲染场景，主线程创建
OffscreenCanvas后通过transferToImageBitmap()移交至 Worker，Worker 可直接getContext('2d')绘图，再传回帧数据 -
CustomEvent 解耦：主线程监听
worker.onmessage后，派发new CustomEvent('worker:rendered', { detail })，让多个模块（日志、UI 更新、动画控制器）各自响应，不硬编码 DOM 操作逻辑
SharedArrayBuffer能绕过DOM限制吗
不能。即使启用SharedArrayBuffer（需服务端配Cross-Origin-Embedder-Policy: require-corp），Worker 和主线程也只能共享内存块（如Int32Array），用于信号量、计数器或状态标志。Worker 仍不能执行任何 DOM 方法。
例如：sharedBuf[0] = 1可以写，但document.body.style.backgroundColor = 'red'在 Worker 中永远非法。真正更新样式的代码必须留在主线程，靠轮询或事件触发。
最容易被忽略的是：Worker 里看似无害的console.log或fetch调用，一旦混入 DOM 引用（比如把element.dataset当参数传进去），就会在序列化时静默失败或丢数据——务必确保所有传出对象彻底剥离 DOM 关联。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
