Web Worker 中无法调用 document.createElement('link')，因其运行在无 DOM 的 DedicatedWorkerGlobalScope 环境；正确做法是 Worker 仅做纯计算（如根据参数返回 CSS 路径），主线程负责创建并插入 link 元素、监听 onload/onerror、避免重复插入及 FOUC。
Web Worker 里调用 document.createElement('link') 会报错
直接在 Worker 中写 document.createElement('link') 或任何含 document、window 的操作，都会触发 ReferenceError: document is not defined。Worker 运行在 DedicatedWorkerGlobalScope 环境下，DOM API 全部不可用——这不是权限问题，是环境根本不存在。
真正可行的路径：Worker 只计算，主线程负责 link 插入
动态引入 CSS 的动作必须落在主线程。Worker 的唯一职责是准备“该引入谁”的决策逻辑，比如根据设备像素比、用户偏好或配置文件算出应加载 /css/theme-dark.css 还是 /css/theme-high-contrast.css。
- Worker 接收主线程传来的原始参数（如
{ prefersColorScheme: 'dark', devicePixelRatio: 2 }） - 执行纯 JS 计算（不访问任何 DOM、不读取
localStorage、不发 fetch） - 返回结构化结果，例如
{ cssHref: '/css/theme-dark.css', integrity: 'sha384-...' } - 主线程收到后，检查是否已存在同
href的link：用document.querySelector(`link[href="${href}"]`) - 若不存在，才创建并插入：
link.rel = 'stylesheet'、link.href = href、link.integrity = integrity、document.head.appendChild(link)
link.onload 和 link.onerror 必须手动监听
动态插入的 link 不会自动 Promise 化，也不能靠 await 等待加载完成。跨域 CSS 加载失败时，onerror 甚至不会触发（仅控制台静默报 CORS 错误），所以：
- 务必显式绑定
link.onload = () => console.log('CSS loaded') link.onerror = () => console.warn('CSS load failed:', link.href)- 若需强保障，插入前可用
fetch(href, { method: 'HEAD', mode: 'no-cors' })预检（注意：no-cors下无法读响应状态，仅能判断是否被浏览器拦截） - 避免重复插入：插入前先查
document.querySelector(`link[href="${href}"]`)，防止多次挂载相同样式表
容易忽略的细节：FOUC 和 CSS 路径解析上下文
即使主线程插入了 link，若插在 document.body 后而非 head，部分浏览器仍会短暂显示无样式内容（FOUC）。更隐蔽的问题是路径解析：
-
link.href是相对于当前 HTML 文档 URL 解析的，不是相对于 Worker 脚本位置 - Worker 里生成的路径字符串（如
'./theme.css'）传给主线程后，要确保它对 HTML 文档上下文有效 - 推荐统一用绝对路径（如
'/assets/theme.css'）或由主线程拼接，避免依赖相对路径语义
Worker 本身不碰 DOM，这是限制，也是设计边界。把“决定什么该加载”和“实际加载并注入”拆开，才能既利用 Worker 的并发能力，又守住浏览器的安全与渲染模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
