必须设rel="stylesheet"，否则浏览器不加载CSS；rel值必须严格为"stylesheet"，href必须为有效URL，两者缺一不可，且应插入document.head中并监听onload确保样式就绪。
必须设 rel="stylesheet"，否则浏览器根本不加载 CSS —— 这是 90% 动态加载失败的根源。
创建 link 元素时 rel 和 href 缺一不可
只写 link.href = "theme.css" 不生效；只写 link.rel = "stylesheet" 但 href 为空或 404，也不会触发请求。两者是硬性组合条件。
-
rel必须是字面量"stylesheet"（不是"style"、"css"或大小写混写） -
href必须是可解析的 URL：相对路径基于当前页面 URL，建议用new URL(url, location.href).href转成绝对地址再比对 - 现代浏览器无需
type="text/css"，但若需兼容 IE8–IE10，建议保留 - 插入前可先用
fetch(href, { method: 'HEAD' })预检（注意跨域限制，仅同源有效）
插入位置决定是否出现 FOUC
插到 document.body 后，部分浏览器（尤其是 Safari 和旧版 Chrome）会延迟应用样式，导致短暂白屏或样式错乱（FOUC）。插到 document.head 是唯一稳妥选择。
- 务必在
head中插入，且尽量早（比如入口 JS 第一行就执行） - 不要等
DOMContentLoaded再插 —— 此时 HTML 已解析完成，样式介入太晚 - 若需确保样式就绪后再操作 DOM，必须监听
link.onload，不能靠 setTimeout 或 DOM 就绪事件
重复插入和加载失败怎么处理
多次调用 loadCSS() 会导致多个相同 href 的 link 标签，引发冗余请求、样式覆盖甚至 FOUC 回滚。
立即学习“Java免费学习笔记（深入）”；
- 插入前检查：
document.querySelector(`link[href="${absoluteUrl}"]`)，存在则直接 return -
link.onerror只对同源失败有效；跨域 CSS 加载失败时该事件静默不触发，仅控制台报 CORS 错误 - 避免用
innerHTML设置style.textContent—— CSS 中的{、}会被 HTML 解析器转义，改用style.textContent = "body { margin: 0; }" - 如需缓存穿透（例如热更新后强制刷新 CSS），可在
href后加版本参数：href += "?v=" + Date.now()
需要等样式加载完再执行 JS 怎么办
动态 CSS 是异步的，document.head.appendChild(link) 立刻返回，但样式规则尚未可用。直接操作依赖该样式的 DOM（比如读取 getComputedStyle）会拿到旧值。
- 唯一可靠方式是绑定
link.onload回调，里面执行后续逻辑 - 不要试图轮询
document.styleSheets或检查sheet.cssRules.length—— IE 需特殊处理，且规则数为 0 不代表未加载（可能只是空文件） - 如果业务要求高一致性（如动画库按类名加载），建议把 CSS 文件拆成更小粒度（
animate-fade.css、animate-bounce.css），加载完成后再加 class
最易被忽略的点：环境变量无法在 HTML 模板中运行时解析，<link href="%NODE_ENV%.css"> 会原样输出成字面量。必须在 JS 运行时读取 import.meta.env.MODE 或 process.env.NODE_ENV，再拼接 URL 并创建 link。
