CSSOM是浏览器提供的样式表操作接口，核心为CSSStyleSheet对象，支持insertRule/deleteRule等增量更新；而style标签是HTML结构，insertRule是其sheet对象的方法，三者层级不同、能力各异。
什么是 CSSOM，它和 style 标签、insertRule 有什么区别
CSSOM 是浏览器暴露给 JS 的样式表操作接口，核心是 CSSStyleSheet 对象，不是单纯拼 HTML 字符串或改 style 属性。它直接作用于样式表规则树，能精确控制媒体查询、选择器优先级、@规则等，而 element.style.color = 'red' 只影响内联样式，document.write 插入 <style> 会触发重排且无法安全移除旧规则。
关键区别在于：CSSOM 支持 deleteRule/insertRule 增量更新，适合热替换；而反复 innerHTML 替换 <style> 元素会导致规则丢失、计算样式中断、开发者工具调试链断裂。
如何用 insertRule 安全注入新样式并保留原有规则
必须通过已存在的 <style> 或 <link rel="stylesheet"> 的 sheet 属性访问 CSSOM。动态创建的 <style> 需先 append 到 DOM 才有 sheet：
const styleEl = document.createElement('style');
document.head.appendChild(styleEl);
const sheet = styleEl.sheet; // ✅ 此时 sheet 不为 null
sheet.insertRule('.btn { color: blue; }', 0); // 插入到第一条
sheet.insertRule('@media (max-width: 768px) { .btn { display: none; } }', sheet.cssRules.length); // 追加到末尾- 索引位置很重要：
insertRule(rule, index)中index超出范围会抛IndexSizeError，建议用sheet.cssRules.length追加，或用0插入最前（高优先级覆盖） - 不能跨 origin 注入：若
<link>指向外域 CSS，sheet为null或只读，此时只能 fallback 到动态<style> - IE11 不支持
insertRule对 @规则（如@keyframes）的操作，需提前检测并降级为整块替换
热替换时如何避免样式闪烁、规则残留和内存泄漏
热替换 ≠ 删除再插入。直接 sheet.deleteRule(0) 循环清空会破坏顺序、导致过渡动画跳变。正确做法是标记 + 覆盖：
立即学习“前端免费学习笔记（深入）”；
- 为每次注入的规则加唯一注释标识，例如
/* [hot-reload-id:abc123] */ .card { padding: 1rem; } - 遍历
sheet.cssRules，用rule.cssText.startsWith('/* [hot-reload-id:')筛出旧规则并记录索引 - 倒序
deleteRule（正序删除会使后续索引偏移） - 批量
insertRule新规则，保持原子性 - 务必清除旧的
<style>元素引用，否则其sheet仍驻留内存，尤其在单页应用中频繁切换预览时易泄漏
HTML 预览场景下，getComputedStyle 和 CSSOM 的配合要点
预览需实时反馈样式效果，但 getComputedStyle(el) 返回的是计算后值，不反映未生效的 CSSOM 修改。必须确保：
- CSSOM 修改后触发强制重排（极少见），通常无需手动
offsetHeight，因为insertRule同步更新样式表，下一帧即生效 - 若预览区是 iframe，需通过
iframe.contentDocument获取其独立的document和sheet，主页面的 CSSOM 对其无效 - 检查
sheet.disabled = true状态——某些构建工具（如 Vite HMR）会临时禁用旧样式表，但忘记恢复，导致热替换后样式“消失” - 不要依赖
sheet.ownerNode类型判断是否可写，有些 polyfill 会伪造该属性，应直接尝试insertRule并捕获DOMException
真正棘手的是 @import 嵌套和 CSS Custom Properties 的级联延迟——它们在 CSSOM 中解析完成前，insertRule 可能静默失败，此时需监听 sheet.onload 或轮询 sheet.cssRules.length 变化后再注入。
