动态加载CSS应优先用link标签，需设rel="stylesheet"和href，避免仅依赖onload；并发插入要按层叠顺序严格控制；重复插入需查重；fetch+insertRule仅适用于小量规则且有诸多限制。
动态创建 link 标签加载 CSS 的基本写法
直接用 JavaScript 创建 link 元素并插入到 head 中，是最通用、兼容性最好的方式。它不依赖构建工具或模块系统，适用于任何运行时需按需加载样式的场景（比如主题切换、A/B 测试、懒加载非关键 CSS）。
关键点在于：必须设置 rel="stylesheet" 和有效的 href，且推荐在 link 加载完成后再执行依赖该样式的逻辑（如读取 computedStyle）。
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/path/to/theme.css';
document.head.appendChild(link);
为什么 link.onload 不总是触发？
link.onload 在部分浏览器（尤其是旧版 Safari 和某些 Android WebView）中不可靠——即使 CSS 加载成功，事件也可能不触发；而 link.onerror 相对更稳定，可用于失败兜底。
更稳妥的做法是轮询检查样式是否生效，或结合 document.styleSheets 判断：
立即学习“Java免费学习笔记（深入）”；
- 加载后立即检查
document.styleSheets长度是否增加，或遍历查找匹配href的 sheet - 若需等待规则可用，可尝试读取某个已知选择器的
getComputedStyle，直到返回预期值（注意避免无限循环） - 不要仅依赖
onload就认为样式已就绪——CSS 解析和应用有延迟，DOM 渲染可能还没反映出来
多个动态 CSS 并发加载时的顺序问题
浏览器会按 link 插入 head 的顺序解析 CSS，但并发插入多个 link 时，网络响应快的可能先完成，导致样式层叠顺序与预期不符（例如后插入的 dark.css 被先插入的 reset.css 覆盖）。
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
解决方法不是“等前一个加载完再插下一个”，而是：
- 确保插入顺序严格符合层叠优先级需求（如重置样式 → 基础组件 → 主题）
- 避免在不同时机多次插入同名
link，重复插入会导致样式重复计算，甚至触发 FOUC - 可通过
link.id或link.dataset.key标记已加载项，插入前先查重：document.querySelector('link[data-key="theme-dark"]')
使用 fetch + insertRule 替代 link 是否可行？
可以，但只适合小量、简单规则。直接 fetch CSS 文本再用 CSSStyleSheet.insertRule 注入，能完全控制加载流程和错误处理，也规避了跨域限制（如果服务端允许 CORS）。
不过要注意：
-
insertRule不支持@import、@media嵌套过深、或含相对路径的url()（如background: url(./img.png)会 404） - 大量规则插入性能较差，且无法利用浏览器原生 CSS 缓存机制
- 调试困难——DevTools 中看不到独立的 CSS 文件名，只有 “injected stylesheet”
真正需要精细控制或规避外链限制时才考虑这条路，日常动态加载仍优先用 link 标签。
最容易被忽略的是：动态插入的 CSS 默认不参与媒体查询的初始匹配（比如页面已处于 print 模式，新插入的 screen-only 样式不会自动禁用），得手动监听 matchMedia 并管理启用状态。
