真实面经题目 · 原创解析
会触发重排的 CSS 属性，本质上都是会改变元素几何信息、文档流占位、字体度量、滚动尺寸或布局上下文的属性。典型包括 width、height、margin、padding、border、display、position、top、left、float、font-size、line-height、grid、flex 相关属性等；而 color、background-color 通常只触发重绘，transform、opacity 在合成层上变化时通常可以避开主线程布局。
回答时不要只背属性名单，要先说重排的触发条件：浏览器已经计算好的盒模型、位置和文档流关系失效，需要重新计算布局。会触发重排的属性通常分几类：盒模型尺寸类，如 width、height、padding、margin、border；定位和文档流类，如 display、position、top、left、right、bottom、float、clear；排版度量类，如 font-size、line-height、letter-spacing、white-space；布局容器类，如 flex、grid、align-items、justify-content、gap；内容和滚动相关变化，如 content、overflow、scrollbar 出现消失。补充一点，读取 offsetWidth、getBoundingClientRect、scrollTop 等布局信息也可能强制浏览器同步完成前面的布局计算。
重排也叫 layout 或 reflow，发生在浏览器需要重新计算元素盒子大小、位置以及它们之间的空间关系时。判断一个 CSS 属性是否会触发重排，关键不是看属性名字是否常见，而是看它是否影响布局树中的几何约束。如果一个属性改变后会导致自身尺寸变化、兄弟元素位置变化、父元素高度变化或后续文本换行变化，那么它大概率会让布局结果失效。
width、height、min-width、max-width、min-height、max-height、margin、padding、border-width、box-sizing 这类属性直接参与盒模型计算。它们改变元素占用空间后，可能影响父元素包裹尺寸、兄弟元素排列和后续内容位置。即使只改一个元素的宽度，影响也可能沿布局树向上和向下扩散，尤其是在普通文档流、表格、flex 和 grid 容器中。
display、position、float、clear、top、left、right、bottom、inset、z-index 的布局影响需要区分。display 从 none 变为 block 会让元素重新进入文档流，必然影响布局；position 改变定位方式会改变包含块和占位关系；top、left 等偏移属性对相对定位或绝对定位元素也会影响最终几何位置。z-index 本身通常不改变布局，但它常和定位上下文一起被讨论，不能机械归类。
font-size、font-family、font-weight、line-height、letter-spacing、word-spacing、white-space、word-break、text-transform 等属性可能改变文本度量、行盒高度和换行位置。文本是布局中非常容易连锁变化的一类内容，一段文字换行点改变后，段落高度、父容器高度、后续模块位置都可能改变。Web 字体加载完成后也可能因为字形宽度不同而引发重新布局。
flex-direction、flex-wrap、flex-basis、flex-grow、flex-shrink、align-items、justify-content、grid-template-columns、grid-template-rows、grid-area、gap、place-items 等属性会改变容器如何分配空间。现代页面大量依赖 flex 和 grid，局部属性变化可能导致整组子项重新计算尺寸与位置。优化时应减少频繁改这些属性的动画，优先用 transform 和 opacity 承担位移、缩放、淡入淡出。
通常不会。visibility 隐藏后元素仍占据原来的布局空间，主要影响绘制可见性；display: none 会让元素退出文档流，通常会触发重排。
通常不会触发主线程布局。transform 改变的是合成阶段的视觉变换，不改变元素在文档流中的占位，因此常用于动画优化。但它可能创建合成层，过度使用也会带来内存和合成开销。
如果前面已经有未提交的样式修改，浏览器为了返回准确的 offsetWidth，必须立即完成样式计算和布局。这会打断原本可批量处理的渲染流程，形成强制同步布局。
重排重新计算元素位置和尺寸，成本通常更高；重绘是在布局结果不变的情况下重新填充像素，例如颜色、阴影、背景变化。重排通常会带来后续重绘，但重绘不一定需要重排。
