重排与重绘
浏览器渲染中重排与重绘的区别，以及为什么动画和样式更新时要关心它们。
#type / concept
#status / growing
#resource / css
#tech / dev / frontend
#platform / browser
[!info] related notes
重排与重绘
CSS 不只是“写出来能显示”，还涉及浏览器为了把样式渲染到屏幕上要付出多少代价。
一句话区分
- 重排：重新计算布局
- 重绘：重新绘制外观
什么是重排
当元素的几何信息发生变化时，浏览器需要重新计算布局。
典型情况：
- 宽高变化
- 位置变化
- 内容增减影响布局
- 字体尺寸变化导致盒子尺寸变化
什么是重绘
当样式变化不影响布局，只影响外观时，浏览器通常只需要重新绘制。
典型情况：
- 颜色变化
- 背景变化
- 阴影变化
为什么要关心
因为重排通常比重绘更重，而频繁重排会直接影响交互流畅度。
尤其在：
- 复杂页面
- 高频动画
- 低端设备
上会更明显。
为什么常说优先动画 transform 和 opacity
因为这类属性通常更容易避免触发布局重算，对性能更友好。
所以很多动效优化建议，本质上是在说：
尽量少改几何布局，多改合成层更容易处理的属性。
最短记忆方式
重排改布局，重绘改外观；动画优先考虑 transform 和 opacity。