web worker 无法操作 dom 或 css，只能执行纯计算并用 postmessage 将结果传回主线程；主线程统一通过 document.documentelement.style.setproperty 批量设置 css 变量，大数组需用 transferable 零拷贝传输，对象须序列化净化。
document.documentElement.style、调用 getComputedStyle 或修改 className。所有样式变更必须由主线程完成，Worker 只能负责计算、处理数据，再把结果传回去。
下面直说关键点怎么落地。
Worker 里不能用 document 或 window 相关 API
这是最常踩的坑：在 worker.js 中写 document.body.style.color = 'red' 会直接报 ReferenceError: document is not defined。Worker 运行在独立全局环境（DedicatedWorkerGlobalScope），没有 DOM 接口，也没有 document、window、localStorage 等主线程专属对象。
正确做法是只做纯计算：
- 接收主线程传来的原始数据（如颜色配置、尺寸阈值、主题 ID）
- 执行耗时逻辑（比如从 10 万条日志中统计夜间模式触发频次）
- 输出结构化结果（例如
{ theme: 'dark', primary: '#2563eb', --bg: '#0f172a' }） - 用
self.postMessage()把结果发回
主线程收到消息后批量更新 CSS 变量
主线程拿到 Worker 返回的数据后，应统一用 document.documentElement.style.setProperty() 批量注入 CSS 自定义属性。避免逐个改内联样式或重写 <style></style> 标签——那样不可维护且易覆盖。
示例（主线程）：
const worker = new Worker('theme-worker.js');
worker.onmessage = (e) => {
const { vars } = e.data; // 如 { '--primary': '#3b82f6', '--bg': '#1e293b' }
Object.entries(vars).forEach(([prop, value]) => {
document.documentElement.style.setProperty(prop, value);
});
};
worker.postMessage({ action: 'compute-theme', userPref: 'dark' });
注意：onmessage 必须在 postMessage() 之前绑定，否则第一次消息会丢失。
传大数组或 TypedArray 时记得用 transferable 优化
如果 Worker 需要返回大量样式计算中间结果（比如一屏 Canvas 的像素级色值映射表），别直接传 Uint8ClampedArray 或普通数组——结构化克隆会深拷贝，卡顿明显。
改用 transferable 方式：
- Worker 内构造
ArrayBuffer，转成TypedArray填充数据 - 调用
self.postMessage({ data }, [data.buffer])，第二个参数移交所有权 - 主线程收到后可直接用该 buffer 创建新视图，零拷贝
不这么做的话，一个 20MB 的 ImageData.data 传一次可能阻塞主线程 300ms 以上。
避免在 message 中传 class 实例或带方法的对象
哪怕你 Worker 里构造了一个 ThemeConfig 类并调用 toCSSVars() 方法，传出去的也只是“空壳” plain object——方法、原型链、私有字段全丢光。结构化克隆不保留行为，只保留可序列化的字段。
安全做法：
- Worker 输出前用
JSON.parse(JSON.stringify(obj))显式净化（小数据可用） - 或用
Object.assign({}, obj)+ 显式白名单字段提取 - 主线程不要依赖
e.data instanceof ThemeConfig，一律当普通对象处理
真正复杂的状态同步（比如多 Worker 协同更新样式）建议用 MessageChannel + port 分离通信通道，避免单个 Worker 实例被多个任务抢占响应时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
