应优先使用 cssstylesheet.insertrule() 预注册样式规则，再通过 classname 切换触发重绘；避免动态插入 style 标签或直接操作 el.style，以防同步重排。
动态插入 <style></style> 标签或通过 JS 创建样式规则，极易在无意识中触发同步重排——尤其当样式立即作用于已渲染元素时。核心问题不在“加样式”本身，而在于插入时机、方式与后续 DOM 操作的耦合。
为什么 document.createElement('style') 会强制重排
浏览器对新 <style></style> 标签的处理是同步的：一旦 appendChild 完成，CSSOM 立即重建，所有匹配该规则的现存元素都会被标记为“需重新计算布局”。哪怕规则只含 color，只要它命中了有浮动、flex 或百分比宽高的元素，就可能连带触发重排。
- 常见错误现象：
const style = document.createElement('style'); style.textContent = '.btn { width: 120px; }'; document.head.appendChild(style);—— 插入瞬间，所有已存在的.btn元素都可能重排 - 更隐蔽的问题：如果插入后立刻读取
el.offsetWidth，浏览器会强制 flush 渲染队列，把本可延迟的重排提前到当前 JS 执行栈 - 兼容性陷阱：IE 不支持
insertRule，但addRule是同步且不可撤销的，同样会立即触发布局
用 CSSStyleSheet.insertRule() 替代插入 <style></style> 标签
insertRule 把样式规则“注册”进已有样式表，不立即生效；直到后续 DOM 变更或下一帧才参与计算，节奏可控得多。
- 必须操作已挂载的样式表（如
document.styleSheets[0]），不能对新建的CSSStyleSheet实例调用（它未关联渲染树） - 规则插入后，需显式给元素加
className或修改style才真正应用，这给了你批量操作的空间 - 示例：
document.styleSheets[0].insertRule('.dynamic-hint { opacity: 0.7; }', 0);→ 此时无重排；后续el.classList.add('dynamic-hint')才触发一次重绘 - 注意：频繁调用
insertRule（如循环里每条规则都插一次）仍会累积开销，应合并规则字符串再一次性插入
动态样式变更必须走 className 切换，而非 style 操作
即使用了 insertRule 预注册规则，若后续用 el.style.opacity = '0.7' 而非 el.classList.add('dynamic-hint')，就绕过了预定义优化路径，直接污染内联样式，破坏浏览器缓存和批量渲染机会。
- 错误链：
insertRule+el.style.color = 'red'→ 内联样式优先级高于 CSS 类，导致规则失效，且每次赋值都可能触发同步重排 - 正确顺序：先
insertRule('.state-error { border-color: #f00; }')，再el.classList.toggle('state-error') - 场景适配：需要传参的动态样式（如颜色值），改用 CSS 自定义属性：
el.style.setProperty('--error-color', '#f00');，CSS 中写border-color: var(--error-color);
避免在 scroll/resize 回调中动态加样式
这类事件高频触发，若每次回调都执行 insertRule 或 classList.add，等于主动制造重排风暴。真实项目中最容易被忽略的是“动态样式 + 高频事件”的组合。
- 典型踩坑：
window.addEventListener('scroll', () => { el.classList.add('scrolled'); });—— 滚动中可能触发上百次，哪怕类名已存在，classList.add本身不重排，但若该类含top或height属性，就会反复重排 - 解法不是节流，而是预置所有状态类，仅用 JS 控制开关：
.header-scrolled { transform: translateY(-4px); }，滚动回调只做document.body.classList.toggle('scrolled') - 更彻底的隔离：对动画容器加
contain: layout paint，限制重排影响范围；或用will-change: transform提前升层（但别滥用，内存代价真实）
真正难的不是知道该用 insertRule，而是在组件初始化、状态切换、第三方库集成等复杂上下文中，始终记得“样式注册”和“样式应用”要分离，且“应用”必须走 class 路径。任何绕过 CSS 文件、直接拼字符串或硬写 style 的做法，都在悄悄放大重排风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
