浏览器渲染页面时，会将页面分为多个图层，然后组合成一个完整视图进行展示
在渲染dom的时候，浏览器实际做的工作是：
1，将dom分割为多个图层
2，对每个图层计算样式结果（Recalculate style-样式重计算)
3,为每个节点生成图形和位置（重排，回流）（重要）
4，将每个节点绘制到图层位图中（重绘)（重要）
5,组合多个图层到页面，生成最终屏幕显示
图层创建条件：
1，拥有3d变换的css属性
2.video标签
3,canvas标签
4,css的变换属性will-change
重排和重绘
重绘是一个元素外观改变所引起的浏览器行为，例如改变outline等属性，浏览器会根据这些新属性重新绘制
使元素呈现新的外观，重绘不会带来重新布局，所有重绘不一定重排。
渲染对象在创建完成并添加到渲染树的时候，并不包含位置和大小信息，计算这些值的过程成为布局或者重排。重排一定会引起重绘。
查看页面的所有图层
通过devtools中的layers可以看到页面的所有图层。
重绘重排的基本单位是图层，所以gif的时候最好单独开一个图层，否则如果gif的图层是document的时候，所有的元素都需要重排或者重绘很影响效率。
优化方案：
1，元素移动最好使用transofrm代替left top,减少重排或者重绘
2,visibility比display好一点，不会触发重排。
3,opacity配合图层使用，既不触发重排也不触发重绘
4，不要使用table布局
table-cell
5,将多次样式的修改定义为一个class，一次性修改
6，修改dom离线再修改
display:none不再渲染树中，离线后再进行修改，这样隐藏和显示只触发两次重排重绘
7，利用文档碎片，vue使用了这种方式进行修改，把多次操作合并为一次操作，虚拟Dom,html5提出了文档碎片
8，不要把获取某些dom节点的变量放在循环中，每次获取也会触发节点的重排重绘，因为计算属性的精确数据
9，动画实现过程中，使用GPU硬件加速：transform:translate
10,为动画元素新建图层，提高动画元素的z-index，与其他元素隔开,图层不能随便开，会影响性能
