面试中经常被问到，介绍一下“重绘（repaint）”与“回流（reflow）”

1.了解浏览器的渲染机制

　　①浏览器采用流式布局模型。

　　②首先浏览器会将HTML解析成DOM，把CSS解析成CSSOM，把CSSOM与DOM结合产生render tree。

　　③有render tree之后，我们知道了节点样式，然后浏览器会计算节点的位置，然后把节点绘制到页面上。

　　总结：回流一定会引起重绘，重绘不一定会引起回流。

2.回流

　　当我们render tree中的一些元素的结构或者尺寸等发生改变，浏览器重新渲染部分或者全部文档的过程叫做回流。

　　会导致回流的操作：

　　①页面首页渲染

　　②浏览器窗口大小发生变化

　　③内容变换

　　④添加或者删除节点

　　⑤激活css伪类

　　⑥clinentWidth之类

3.重绘

　　当页面中元素样式的改变不能影响它在文档流中的位置，浏览器会将新样式赋予给元素，这个过程叫做重绘。

　　①background

　　②visibility

4.性能影响

　　总结：回流的性能消耗要比重绘大。

5.避免性能影响

　　css：

　　　　①避免使用table布局

　　　　②避免设置多层内嵌样式

　　JavaScript：

　　　　①避免频繁操作DOM

　　　　②对于大量插入DOM的操作，建议使用文档片段，也就是documentFragment.