浏览器渲染机制、重排、重绘

网页生成过程

1 HTML被HTML解析器解析成DOM树

2 CSS被CSS解析器解析成CSSOM树

3 将DOM树和CSSOM树结合形成渲染树（render tree）

4 生成布局Flow,即把所有渲染树的节点进行平面整合

5 布局绘制Paint,呈现屏幕

---

重排（reflow）

重排也叫回流。 当DOM的变化影响了元素的几何信息（其实就是DOM的位置和尺寸大小），浏览器需要重新计算DOM元素的几何属性，并把起放在界面正确的位置。这个过程就叫重排。

触发：
1 添加删除DOM元素（可见元素）
2 元素改变尺寸——margin padding boder width height

---

重绘（repaint）

一个元素的外观发生变化，但布局方面没有改变，重新把它的外观绘制出来的过程。

触发：
改变元素的颜色color、背景background、box-shadow等属性

---

重排优化

1、分离读写操作
2、class样式集中修改
3、缓存需要修改的dom元素
4、尽量修改元素的position:absolute、fixed元素，对其他元素影响不大
5、不要通过父元素修改子元素尺寸大小，修改子元素同时不要影响父元素
注意transform不会触发重绘回流、transform属于合成属性，对合成属性精选transiton/animate动画时，将会创建一个合成层。使得动画元素在独立的层进行渲染，元素的内容没发生变化就没必要发生重绘。