对重绘和重排（回流）的知识点梳理

1.重绘和重排（回流）是什么？该怎样来避免？

重绘就是重新绘制（repaint）
重排就是重新排列（reflow）

DOM发生改变的时候触发重排，使DOM重新排列，重绘不一定会重排，但是重排一定发生重绘，重绘和重排都会耗费浏览器的性能，尽量避免。

网页如何生成（webkit内核浏览器渲染机制）

1. 解析html构建DOM树
2. 解析css绘制CSS树
3. 生成render tree（渲染树）
4. layout排列，将渲染树节点合成（渲染）
5. painting绘制，将排列绘制在屏幕上（渲染）

任何对render tree中元素的操作都会引起重排或者重绘，比如：

1. 添加、删除元素(重排+重绘)
2. 隐藏元素，display:none(重排+重绘)，visibility:hidden(只重绘，不重排)
3. 移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+重排)
4. 对style的操作(对不同的属性操作，影响不一样)
5. 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(重排+重绘)

优化（列举三条）：

1.直接修改className，一次性修改多个样式；
2.将盒子position属性设置为absolute或者flex，脱离文档流；
3.如果创建多个dom节点，利用fragment一次加入document，不要循环添加节点，利用fragment一次加入document，不要循环添加。