回流、重绘

参考文章： 回流(reflow)重绘(repaint)

你真的了解回流和重绘吗

1. 概念

• 回流： 当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流

• 重绘： 当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘

2. 浏览器渲染过程

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树
• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
• Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
• Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
• Display:将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中

（注意：渲染树只包含可见的节点）

3. 何时发生

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
• 页面一开始渲染的时候（这肯定避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

(注意：回流一定会触发重绘，而重绘不一定会回流)