回流与重绘的大致

回流：

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

引起回流的操作：

1，页面首页渲染

2，浏览器窗口大小发生变化

3、内容变化

4，添加或者删除节点

5，激活css伪类

6，clientWidth......

 

重绘：

页面中元素的样式发生变化，不影响它在文档流中的位置，浏览器会将新样式复制给元素，这个过程叫重绘。

background

visibility......

 

性能影响：

回流的性能消耗要比重绘大

避免影响：

CSS

避免使用table布局

避免设置多层内联样式

JS

避免频繁操作DOM

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