浏览器的回流与重绘

1.浏览器的渲染过程：

处理HTML脚本，生成DOM树
处理CSS脚本，生成CSSOM树   （DOM和CSSOM是独立的数据结构）
将DOM树和CSSOM树合并为渲染树
对渲染树中的内容进行布局，计算每个节点的几何外观
将渲染树中的每个节点绘制到屏幕中

二、重绘

当前元素的样式（背景颜色，字体颜色）发生改变的时候，我们只需要把改变的元素重新的渲染一下即可，重绘对于浏览器的性能较小。

发生重绘的情形：改变容器的外观风格等，比如background:black等。改变外观，不改变布局，不会影响到其他的DOM。
　　
三、回流

是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。
四、引起回流因素

因为回流可能导致整个COM树的重新构造，所以是性能的一大杀手，一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流，下面是引起浏览器触发回流reflow的变化：

1.页面首次渲染
2.浏览器窗口大小发生改变
3.元素尺寸或者位置发生改变
4.元素的内容发生变化（文字数量或者图片大小）
5.元素字体大小变化
6.添加或者删除可见的DOM元素
7.激活CSS伪类（如：hover）
8.查询某些属性或调用某些方法

五、优化方案
　　css:

1、避免使用table布局 　　
2、尽可能的在DOM树最末端改变class 　　
3、避免设置多层内联样式
4、将动画效果应用到position属性为absolute或fixed已经脱离正常文档流的元素上（个人实际项目，手机端动画效果应用到absolute元素上时，浏览器也会发生回流效应，因此尽量不要使用js改变元素位置操作动画效果，手机端建议CSS3动画效果，由浏览器渲染引擎进行动画绘制，性能要高于JS控制）
5、避免使用CSS表达式（如calc()动态设置元素宽高）

js:

1、避免频繁操作样式，最好是一次性重写style属性，或者将样式列表定义为class，一次性更改class属性
2、避免频繁操作DOM，创建一个documentFragment，在其上面应用所有的DOM操作，最后再将其添加到文档中
3、也可以先将元素设置为display:none,再进行相关DOM操作，操作结束后，再让它显示出来。因为在display:none元素上操作DOM，并不会引起浏览器的回流和重绘
4、避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
5、对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。