浏览器渲染过程：
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
网友评论