【前端学习 - CSS（20）回流（重排）和重绘】

1. 回流（重排）和重绘区别？

回流（重排），reflow:当 render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变时而需要重新构建；

重绘（repaint）:当 render tree 中的一些元素需要更新属性，而这些属性只影响元素的外观，风格，而不会影响布局时，称其为重绘，例如颜色改变等。

注意：每个页面至少需要引发一次重排+重绘，而且重排（回流）一定会引发重绘。

触发重排（回流）的条件：

• 增加或者删除可见的 dom 元素；
• 元素的位置发生了改变；
• 元素的尺寸发生了改变，例如边距，宽高等几何属性改变；
• 内容改变，例如图片大小，字体大小改变等；
• 页面渲染初始化；
• 浏览器窗口尺寸改变，例如 resize 事件发生时等；

技巧：回流理解为流动，流动自然会引起布局的变动；重绘可以理解为表层绘画，那么只是外观的改变。