会触发重排的CSS属性包括width、height、margin、padding、border、display、position、top、left、right、bottom、font-size、line-height、overflow和box-sizing；这些属性改变元素几何尺寸或布局位置，强制浏览器重新计算布局。
哪些CSS属性会触发重排（Reflow）
重排是浏览器重新计算元素几何尺寸和位置的过程，开销大、连锁影响广。直接修改以下属性会强制触发重排：
-
width、height：改变元素盒模型尺寸，影响布局流 -
margin、padding、border：调整内外边距或边框宽度，改变元素占用空间 -
display（如从none切换为block）：元素进出文档流，破坏原有布局结构 -
position、top、left、right、bottom：定位方式或偏移量变化，可能引发父容器及兄弟元素重排 -
font-size、line-height：文本尺寸变化可能导致行高、换行、容器高度连锁变动 -
overflow（当内容溢出且值在visible与hidden/scroll间切换）：影响滚动机制和渲染边界
注意：box-sizing 虽不常被想到，但切换 content-box ↔ border-box 会改变宽高计算逻辑，同样触发重排。
哪些CSS属性只触发重绘（Repaint）
重绘仅更新像素外观，不改布局，性能代价小得多。以下属性变更通常只重绘：
-
color、background-color：纯视觉色值变化 -
visibility（visible↔hidden）：元素仍占位，不破坏流式布局 -
outline、box-shadow、text-shadow：附加装饰层，不影响盒模型 -
border-style或border-color（前提是边框宽度未变）：仅样式/颜色更新 -
opacity：透明度变化由合成层处理，现代浏览器通常走 GPU 合成路径，不触发布局或绘制主流程
关键区别在于：只要没动到元素的“占地大小”或“在流中的位置”，就大概率只重绘。
立即学习“前端免费学习笔记（深入）”；
为什么 transform 和 opacity 是性能友好型动画属性
它们被浏览器单独提升为独立图层（layer），交由 GPU 合成，绕过主线程的 Layout 和 Paint 阶段：
-
transform: translateX(10px)不改变元素原始位置和尺寸，只做视觉位移，不触发重排 -
opacity: 0.5改变的是图层混合权重，不涉及样式重计算或像素重绘主流程 - 但要注意：
transform: scale(1.2)若导致子元素溢出或触发overflow: hidden边界重算，仍可能间接引发重排
滥用 will-change: transform 可能提前创建图层，但过度使用会增加内存开销和合成负担，不是万能开关。
容易被忽略的隐式重排陷阱
有些操作表面看不改样式，却因强制同步布局而立刻触发重排：
- 读取
offsetWidth、offsetHeight、getBoundingClientRect()等布局信息后，紧接着写样式（如element.style.width = '200px'）——浏览器必须先 flush 队列、完成重排，才能返回准确值 - 连续多次设置
style.xxx属性（如分别设width、height、margin），每条都可能触发一次重排，而非合并 - 用
display: none隐藏后再用offsetTop读取——此时元素已脱离文档流，读取会强制回流并报 0，但后续恢复显示时仍要重排
真正影响性能的，往往不是单次重排，而是高频、分散、夹杂读写的 DOM 操作节奏。
