什么是重绘和回流(重排)

浏览器是如何渲染的：

1. 解析（Parser）HTML，生成DOM树(DOM Tree)

2. 同时解析（Parser） CSS，生成样式规则 (Style Rules)

3. 根据DOM树和样式规则，生成渲染树(Render Tree) 

4. 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）

5. 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制  Display: 展示在页面上 

6. Display: 展示在页面上

重绘和回流(重排) ：

回流(重排) ：

当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过 程称为回流。

重绘：

由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、 outline等), 称为重绘。

重绘不一定引起回流，而回流一定会引起重绘。

会导致回流（重排）的操作：

1. 页面的首次刷新 

2. 浏览器的窗口大小发生改变

3. 元素的大小或位置发生改变

4. 改变字体的大小

5. 内容的变化（如：input框的输入，图片的大小）

6. 激活css伪类 （如：:hover）

7. 脚本操作DOM（添加或者删除可见的DOM元素）

简单理解影响到布局了，就会有回流