动态注入css的核心方法是appendchild而非insertadjacenthtml；前者通过document.createelement('style')创建元素更可控，支持后续操作与统一管理，后者仅适合一次性内联样式调试。
动态注入 CSS 的核心方法是 insertAdjacentHTML 还是 appendChild？
两者都能用，但 insertAdjacentHTML 更安全——它不触发重排（reflow），也不解析 HTML 字符串里的 JS（避免意外执行），适合纯样式注入。而直接 appendChild 一个 style 元素更可控，尤其在需要后续操作（如移除、查值）时。
- 用
insertAdjacentHTML：适合一次性写死的内联样式字符串，比如调试时快速加一段body { background: red } - 用
appendChild+document.createElement('style')：推荐用于封装加载器，便于统一管理、支持异步加载后追加、可绑定data-id标识来源 - 别用
document.write或innerHTML到head——前者会清空整个页面，后者可能被浏览器忽略或乱序执行
如何避免重复加载同一份 CSS？靠 URL 哈希还是 DOM 查询？
DOM 查询更可靠。URL 哈希容易误判（比如带时间戳参数、CDN 版本号变动），而检查 document.querySelectorAll('style[data-css-src]') 是否已存在对应 data-css-src 属性，才是真实状态。
- 给每个注入的
style元素加上data-css-src="xxx.css"，加载前先查一遍 - 不要只比对 URL 字符串，注意协议、路径大小写、末尾斜杠等细微差异
- 如果 CSS 是内联字符串（非远程 URL），可用
data-css-hash存 MD5 或简单截断 hash，避免长内容比对 - 注意：Safari 对
data-属性大小写敏感，统一用小写
loadCSS 封装时，onload 和 onerror 能否准确捕获失败？
不能。原生 link 标签的 onload 在 Firefox 中不触发，onerror 对 CORS 或 404 的兼容性也差；换成 style 标签则根本没有这些事件。必须换思路。
- 远程 CSS 推荐用
fetch加载文本，再注入style——这样能拿到 HTTP 状态码和网络错误 - 注入后可通过读取
document.styleSheets并检查cssRules.length是否 > 0 来粗略判断是否生效（注意跨域 stylesheet 的cssRules为空） - 不要依赖
link.onload做关键逻辑，比如“等样式加载完再渲染组件”，它在多数浏览器里不可靠 - 若必须用
link，可用rel="preload"提前拉取，再用定时轮询sheet.cssRules变化，但成本高、不推荐
IE11 兼容性下怎么处理 CSSStyleSheet.insertRule 的限制？
IE11 不支持向空 style 直接调用 insertRule，必须先设 textContent 或用 styleSheet.addRule（已废弃但 IE 专属有效）。
立即学习“前端免费学习笔记（深入）”；
- 检测环境：
if (typeof CSSStyleSheet.prototype.insertRule === 'function')再决定走现代 API 还是降级 - IE 下优先用
styleSheet.addRule(selector, styleStr, index)，注意第三个参数是插入位置，不是数组索引 - 不要试图在 IE 中用
insertRule向刚创建的空style注入——会报错 “Invalid argument” - 所有动态注入最终都应回落到
textContent赋值，这是最稳的兜底方式
