Module Worker 不支持操作 DOM，仅用于纯计算型模块化任务；DOM 更新必须在主线程完成，Worker 与主线程通过消息协作，严禁绕过限制。
Module Worker 本身不支持直接操作 DOM，这是浏览器的硬性限制。子线程（Worker）运行在独立的全局环境，没有 window、document 或任何 DOM API。因此，“在子线程中实现模块化的 DOM 逻辑”这个说法存在根本性误解——DOM 逻辑只能在主线程执行。
Module Worker 的真实定位：纯计算型模块化任务
Module Worker 的价值在于用 import 加载 ES 模块，组织可复用的、与 DOM 无关的业务逻辑，比如：
- 数据解析（CSV/JSON Schema 校验、树形结构扁平化）
- 加密解密（AES 加密、JWT 签名验证）
- 图像处理（Canvas 像素级计算、WebAssembly 预处理）
- 状态同步（CRDT 冲突合并、离线操作日志回放）
这些逻辑可以拆成多个模块（如 utils/crypto.js、models/todo.js），通过 import 在 Worker 中按需引入，实现真正意义上的“模块化”。
DOM 逻辑必须留在主线程，但可与 Module Worker 协同
典型协作模式是：Worker 负责耗时计算并返回结果，主线程接收后安全地更新 DOM。例如：
// main.js（主线程）
const worker = new Worker('./processor.js', { type: 'module' });
worker.onmessage = ({ data }) => {
// ✅ 安全：只在主线程操作 DOM
document.getElementById('result').textContent = data.summary;
renderChart(data.metrics); // 调用本地 DOM 渲染函数
};
worker.postMessage({ action: 'analyze', payload: hugeData });
// processor.js（Module Worker）
import { parseLog, aggregateStats } from './lib/analyzer.js';
import { hashString } from './utils/crypto.js';
self.onmessage = async ({ data }) => {
if (data.action === 'analyze') {
const summary = parseLog(data.payload);
const metrics = aggregateStats(summary);
// ❌ 这里不能出现 document、querySelector、appendChild 等任何 DOM 调用
self.postMessage({ summary, metrics });
}
};
避免常见误区：不要尝试绕过 DOM 限制
以下做法均无效或危险：
- 传入 DOM 元素引用给 Worker：序列化会丢失对象引用，且 Worker 无法反序列化为真实节点
-
在 Worker 中动态创建 script 标签注入 DOM：Worker 没有
document.createElement，语法报错 -
用
OffscreenCanvas替代 DOM 操作：它仅替代渲染，不提供 HTML、事件、布局等能力 - 依赖第三方“DOM 模拟库”（如 jsdom）：它们在 Worker 中可运行，但生成的是内存对象，无法反映到真实页面
进阶建议：用 MessageChannel + Transferable 实现高效协同
若需频繁通信或传递大量数据（如 ArrayBuffer），推荐：
- 使用
MessageChannel创建独立通道，避免onmessage冲突 - 对可转移对象（
ArrayBuffer、ImageBitmap）使用transfer选项，零拷贝提升性能 - 将 DOM 更新逻辑封装为纯函数（如
createListItem(item)），主线程调用时传入数据，保持关注点分离
