重绘代价高因深层嵌套扩大样式重算与几何更新范围，通配符选择器加剧匹配开销；修改布局属性触发重排，而transform等仅合成；应简化嵌套、避免通配符、提升动画元素为合成层，并用DevTools定位热点。
为什么重绘代价高，而深层嵌套会触发它
浏览器渲染页面时，DOM 结构越深，CSS 选择器匹配开销越大；一旦某个节点样式变更（比如 display、left、width），浏览器可能需要重新计算该节点及其所有后代的几何位置和样式——这就是重绘（repaint）甚至重排（reflow）。深层嵌套放大了这个影响范围。
通配符选择器如 * { box-sizing: border-box; } 看似方便，但强制浏览器对每个节点都做一次样式匹配，尤其在 DOM 节点数过万时，初始样式计算阶段就会明显卡顿。
- 避免写超过 6 层的嵌套 HTML（如
div > div > div > div > div > div） - 用语义化标签（
header、article、nav）替代无意义的div堆叠 - 把频繁动画的元素提升为合成层（加
transform: translateZ(0)或will-change: transform），让其脱离普通文档流，减少重排波及面
CSS 中哪些写法会隐式触发重排
不是所有样式变更都只重绘。修改 height、width、padding、font-size、top 等布局属性，会触发重排；而 opacity、transform、filter 通常只走合成器线程，不触发布局计算。
- 别在 JS 中反复读写
offsetHeight/clientWidth—— 每次读取都可能强制同步刷新样式树 - 批量修改样式：用
className切换预定义类，而非逐个设style.xxx - 动画优先用
transform+opacity，禁用left/top驱动位移
如何快速定位重绘/重排热点
Chrome DevTools 的 Rendering 面板（需在 More Tools → Rendering 中勾选 Paint flashing 和 Layout Shift Regions）能实时高亮重绘区域；Performance 面板录制操作后，筛选 Layout 或 Update Layer Tree 事件，可定位具体哪行 CSS 或 JS 触发了昂贵计算。
- 开启
paint flashing后，频繁闪烁的区块就是重绘热点，重点检查其父级是否过度嵌套或用了通配符规则 - Performance 录制中若出现长任务（>50ms）且堆栈含
Recalculate Style，说明 CSS 匹配逻辑太重，应简化选择器（例如把body * .btn改成.btn） - 用
getComputedStyle(el)检查某元素是否被意外继承了开销大的样式（如box-shadow、filter: blur()）
重绘本身不可怕，可怕的是它被高频、大面积、不可控地触发。真正难优化的，往往不是某条 CSS 规则，而是嵌套结构+动态 JS 修改+未隔离动画层这三者叠加后的连锁反应。
