一、面试官必问：哪些属性触发重排？

触发 重排（Reflow） 的属性（改几何/布局）

• width / height
• margin / padding
• left / top
• display
• position
• float
• font-size
• overflow
• 窗口 resize
• 添加/删除 DOM

一句话记：
只要改“大小、位置、结构”，就触发重排。

二、哪些属性只触发重绘，不触发重排？

只触发 重绘（Repaint）

• color
• background-color
• visibility
• border-color
• box-shadow
• border-style

一句话记：
只改“颜色、样式、外观”，不改大小位置 → 只重绘。

三、哪些属性既不重排也不重绘，只走合成？

性能最高：合成（Composite）

• transform（translate、scale、rotate）
• opacity

这两个是动画最优解。

四、高频面试题：怎么减少重排？（标准答案）

1. 批量修改 DOM
   不要一条一条改样式，一次性改完。
2. 使用 DocumentFragment
   离线操作 DOM，最后一次性插入。
3. 先隐藏再修改
   display: none 后修改，再显示。
4. 不要一边读布局一边改样式
   不要循环里读 offsetWidth、clientHeight。
5. 使用 CSS 动画，不用 JS 频繁改样式
6. 动画用 transform / opacity
7. 使用 will-change 提前提升图层

五、高频面试题：重排一定触发重绘吗？

是。
重排 → 必然触发重绘
重绘 → 不一定触发重排

六、高频面试题：display:none 与 visibility:hidden 区别

• display: none
  不占位置 → 触发重排
• visibility: hidden
  占位置，只是看不见 → 只触发重绘，不重排

七、30 秒终极背诵版（面试直接说）

• 重排：改大小、位置、结构，开销最大，一定会触发重绘。
• 重绘：改颜色、外观，不改布局，开销中等。
• 合成：transform、opacity，GPU 加速，开销最小。
• 优化：能合成不重绘，能重绘不重排。