重排与重绘
浏览器渲染中重排与重绘的区别，以及为什么动画和样式更新时要关心它们。
#synthesis
#growing
#css
#frontend
#browser
[!info] related notes
- 所属 MOC: CSS MOC
- 面试问法: 回流和重绘有什么区别
- 相关知识: css-animation, css-transform, css-transition, 浏览器渲染流程, critical-rendering-path
重排与重绘
CSS 不只是“写出来能显示”，还涉及浏览器为了把样式渲染到屏幕上要付出多少代价。
一句话区分
- 重排：重新计算布局
- 重绘：重新绘制外观
什么是重排
当元素的几何信息发生变化时，浏览器需要重新计算布局。
典型情况：
- 宽高变化
- 位置变化
- 内容增减影响布局
- 字体尺寸变化导致盒子尺寸变化
什么是重绘
当样式变化不影响布局，只影响外观时，浏览器通常只需要重新绘制。
典型情况：
- 颜色变化
- 背景变化
- 阴影变化
为什么要关心
因为重排通常比重绘更重，而频繁重排会直接影响交互流畅度。
尤其在：
- 复杂页面
- 高频动画
- 低端设备
上会更明显。
为什么常说优先动画 transform 和 opacity
因为这类属性通常更容易避免触发布局重算，对性能更友好。
所以很多动效优化建议，本质上是在说：
尽量少改几何布局，多改合成层更容易处理的属性。
最短记忆方式
重排改布局，重绘改外观；动画优先考虑 transform 和 opacity。
学习检查
不看正文回答：
- 重排与重绘分别重新计算什么？
- 为什么“发生重排通常还会伴随重绘”，反过来却不一定？
- 宽度变化、颜色变化、
transform动画分别更可能落在哪一层？ - 为什么高频动画中常优先考虑
transform/opacity？ - 如果页面卡顿，你会如何判断问题主要来自布局、绘制还是别的主线程工作？
Digital Biome