“重绘” 和 “重排”

加深认识 “重绘”  和 “重排”

1.重绘

重绘是指一个元素外观改变所触发的浏览器行为，大概就是外观属性的改变，像，背景颜色，等

 2，重排

重排是指渲染树中因为元素的尺寸或规模改变，需要重新构建的这个过程。

3，触发重排的条件

• 页面第一次加载时
• 添加或删除可见的dom元素时
• 元素的位置改变，或使用动画时
• 元素尺寸改变时
• 浏览器的窗口尺寸改变时
• 填充的内容改变时

4，重绘和重排的关系

重排一定回引发重绘，但重绘不一定回重排

5，顺便讲讲浏览器的渲染过程，上图

 从图大概可以看出来这几点

1. 解析html 生成dom树
2. 解析css 生成 cssom树
3. 将dom树和CSSom树结合。生成渲染树 （这个时候已经走到render tree 啦）
4. 然后就是layout(这就是回流) ，可以得到几何信息
5. 再然后就是重绘啦，可以得到节点的绝对像素，
6. 最后就是将像素发给GPU，展示在页面上  （这块还不是特别清楚，以后会补充）