浏览器渲染过程：

1、根据html文档解析构建DOM树

2、根据css文档解析构建CSSOM树

3、根据DOM和CSSOM树生成一颗渲染树

4、根据渲染树来布局，计算元素的位置

5、调用GPU绘制，合成元素，显示到屏幕上

在构建CSSOM树时会阻塞渲染，直至CSSOM树构建完成；；在解析html标签，遇到script标签也会暂停构建DOM，完成后才会从暂停的地方重新开始；；并且解析CSS样式表也会阻塞JS文件的执行，只有当解析完样式表才会执行JS，因此可以认为CSS也会暂停构建DOM

重绘（repaint）和回流（reflow）

重绘只更改外观不会影响布局，比如color属性

回流会改变元素的布局或者几何属性

回流必定会发生重绘，重绘不一定会引发回流

所以可能会导致性能问题的原因有：

1、改变window的大小

2、改变字体大小

3、添加或删除样式

4、定位或者浮动

5、盒模型

如何减少重绘和回流？

1、使用translate代替top

2、使用visibility代替display:none

3、不要把DOM节点的属性值放在循环里当成变量

4、不要使用Table布局

5、将频繁运行的动画变为图层，图层能够阻止该元素的回流影响别的元素

如何生成新图层？

1、position:fixed

2、video、iframe标签

3、通过动画实现的opacity动画转换

4、3D变换：translate3d、translateZ