会触发重排的CSS属性包括width、height、top、left、font-size、margin等；应优先用transform和opacity替代，通过class切换而非内联样式操作，并利用contain、will-change等优化重排范围与时机。
哪些CSS属性会触发重排（reflow）
修改元素的宽高、位置、字体大小等影响布局的属性，浏览器必须重新计算整个渲染树，这是最耗性能的操作。比如改 width、height、top、left、font-size、margin，都会强制触发重排。
常见错误现象：在 scroll 或 mousemove 回调里频繁设置 element.style.left = x + 'px'，页面直接卡顿。
- 能用
transform代替位移/缩放就别碰top/left/width - 避免在循环中读取
offsetHeight、getComputedStyle()等“强制同步布局”的API -
display: none比visibility: hidden更重——前者触发布局移除，后者只跳过绘制
如何用transform和opacity规避重排重绘
transform 和 opacity 属于合成层（compositing layer）属性，浏览器会把它们交给GPU单独处理，不干扰主渲染流程。只要元素已提升为独立图层（例如加了 will-change: transform 或已有 transform），改这两个值就不会触发重排或重绘，只走合成。
使用场景：动画、拖拽、下拉菜单展开、模态框淡入。
- 写
transform: translateX(10px)，别写left: 10px - 用
opacity: 0.5控制透明度，别用visibility: hidden或display: none做渐隐 - 对频繁动画的元素提前加
will-change: transform（但别滥用，它本身有内存开销）
为什么class切换比内联style更安全
直接操作 element.style.xxx 会污染内联样式，导致CSS优先级混乱，还容易在多次赋值时触发不必要的重排。而通过添加/移除 class，所有样式声明集中在CSS文件里，浏览器可以批量计算、缓存并复用渲染结果。
性能差异明显：10次 el.className = 'a' + el.className = 'b' 可能只触发1次重排；10次 el.style.left = ... 则大概率触发10次。
- 把动画状态抽成 class，比如
.is-moving、.is-fading - 避免在JS里拼接
style字符串，如el.style.cssText = 'left:10px;top:20px;' - 需要动态计算样式时，优先用
CSS Custom Properties（即--my-var），再用element.style.setProperty('--my-var', val)
哪些CSS写法会悄悄拖慢渲染
看似无害的写法，可能让浏览器反复查询、匹配、回溯。比如通配符选择器、深层嵌套、过度依赖 :nth-child，都会增加样式计算时间；而 box-sizing: border-box 虽然不触发重排，但若没统一设，后续计算宽高时容易出错，间接引发修复性重排。
兼容性影响：老版本Chrome对 contain: layout paint 支持弱，但现代浏览器中它是控制重排范围的利器。
- 避免
* { box-sizing: border-box }全局重置——改用html { box-sizing: border-box }+*::before, *::after { box-sizing: inherit } - 用
contain: layout paint封装独立模块（如卡片列表项），限制浏览器重排影响范围 - 慎用
float布局，它会让父容器无法自然包裹子元素，常需clearfix，进而诱发意外重排
真正难的不是记住哪几个属性会重排，而是判断「这个交互是否真的需要实时响应布局变化」。很多时候，加个 requestAnimationFrame 节流、把多次读写拆成「读一批、算一次、写一批」，比硬刚CSS属性更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
