回流、重绘

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

你真的了解回流和重绘吗

1. 概念

• 回流： 当render树中的一部分或者所有由于大小边距等问题发生改变而须要重建的过程叫作回流

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

2. 浏览器渲染过程

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

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

3. 什么时候发生

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

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