减少样式重算的关键是避免读写交替触发强制重排，应集中读/写操作或用requestAnimationFrame分离时机；优先用transform/opacity替代高风险布局属性；限制选择器范围，善用CSS自定义属性和:is()等现代特性。
减少不必要的样式重算（即避免强制同步布局、Layout Thrashing），关键在于让浏览器能高效缓存和复用样式计算结果，而不是在 JS 执行中反复读写触发重排重绘。重点不在“删多少 CSS”，而在“怎么写、怎么动、怎么读”。
避免读写交替触发强制重排
当 JS 代码中连续出现“读布局 → 改样式 → 再读布局”这类模式时，浏览器必须立刻计算当前样式（重排），才能返回准确值，造成性能卡顿。
- ❌ 错误写法：
elem.offsetWidth; elem.className = 'active'; elem.offsetHeight; - ✅ 正确做法：把所有读操作集中到一起，所有写操作集中到一起；或使用
getComputedStyle缓存后统一读取 - 更稳妥方式：用
requestAnimationFrame分离读写时机，例如先在帧开始读，再在下一帧写
慎用会触发重排的属性
某些 CSS 属性修改后，浏览器无法仅靠合成层更新，必须重新计算整个布局树。
- 高风险属性：width / height / top / left / margin / padding / border / display / position / font-size / line-height 等
- 低风险替代：优先用
transform（平移/缩放/旋转）和opacity动画，它们走合成器线程，不触发布局计算 - 示例：滚动中动态调整元素位置，用
transform: translateY(10px)比top: 10px快得多且不重排
限制样式依赖的 DOM 范围
选择器越宽泛、层级越深，浏览器匹配和重算成本越高；同时，局部样式变动越容易波及全局。
- 避免通配符和标签选择器组合：
* { margin: 0 }或div p span会让每次 DOM 变动都检查大量节点 - 用类名直接控制：
.card-title比.card .header h2更快匹配、更少副作用 - 对频繁动画的元素添加
will-change: transform（仅限必要时），提示浏览器提前升格图层，减少运行时判断开销
利用 CSS 自定义属性 + :is() / :where() 控制作用域
现代 CSS 提供了更轻量的逻辑表达能力，避免用 JS 动态切换大量 class，也减少样式规则爆炸。
- 用
:is(.dark, .high-contrast) .btn替代重复写两套规则，减少规则数量 - 将主题色、间距等通过
var(--space-md)注入，JS 只需改根变量，无需增删 class，不触发选择器重匹配 - 配合
content-visibility: auto隐藏非可视区域内容，让浏览器跳过其样式计算和布局
