link.rel必须设为"stylesheet"，否则浏览器不加载CSS；应插入head中防FOUC；插入前需去重；onload/onerror需显式绑定，跨域失败不触发error。
必须设 rel="stylesheet"，否则浏览器根本不加载 CSS —— 这不是兼容性问题，是规范硬性要求。
为什么 link.rel = "stylesheet" 不能省略
浏览器只识别 rel="stylesheet" 这个精确字符串。设成 rel="style"、rel="css"，或压根不设，link 就只是个普通 HTML 元素，不会触发任何下载或解析行为。很多调试失败的案例，根源就在这里。
实操建议：
-
link.rel必须显式赋值为'stylesheet'，别依赖“应该能推断” - 若需兼容 IE8 等老旧环境，补上
link.type = 'text/css'；现代浏览器可省略 - 不要用
setAttribute('rel', 'stylesheet')替代直接赋值，部分旧版 Safari 对此处理不稳定
插入位置错了会触发 FOUC
把 link 插入 document.body 后，Safari 和旧版 Chrome 可能延迟应用样式，导致页面先无样式渲染、再闪动（FOUC）。这不是 bug，而是渲染流程规范决定的：CSS 必须在 DOM 构建早期介入。
实操建议：
- 一律用
document.head.appendChild(link) - 避免用
document.body.appendChild(link)或插到body末尾 - 如需控制顺序（比如确保在某 UI 库 CSS 之后），给已有
link加data-loaded标记，再用insertBefore精准定位
重复插入同个 href 会引发样式覆盖或冗余请求
路由切换、组件多次挂载、热更新时，没做去重就会反复插入同一份 CSS。结果可能是两次 HTTP 请求、规则叠加冲突，甚至因加载时机差异引发布局抖动。
实操建议：
- 插入前查
document.querySelector(link[href="${href}"]) - 对带版本号或时间戳的 URL（如
theme.css?v=2.1.0），统一用new URL(href, location.href).href转成绝对路径再比对 - 若需切换主题，先
oldLink.remove()再插入新link，不要指望后加载的自动覆盖
onload 和 onerror 不是 Promise，跨域失败还不报错
link.onload 和 link.onerror 是事件，不是可 await 的 Promise。写 loadCSS(url).then() 会直接报错。更麻烦的是：跨域 CSS 加载失败（如 403、CORS 拒绝）根本不会触发 onerror，只在控制台打 warning，JS 层完全感知不到。
实操建议：
- 必须显式绑定两个事件：
link.onload = () => {}、link.onerror = () => {} - 跨域资源建议配合
fetch(href, { method: 'HEAD', mode: 'no-cors' })预检（注意no-cors下无法读状态码，仅探测通路） - 生产环境用 CDN 时，优先走同域代理或服务端开启 CORS，别靠静默失败兜底
真正难的不是创建 link，而是加载状态的可观测性与竞态控制——尤其当多个模块各自尝试加载同一份 CSS 时，href 字符串是否等价、插入时机是否冲突、错误是否被静默吞掉，这些细节往往在上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
