合成是将页面已绘制部分放在一起在屏幕上显示的过程
1 .这个过程主要有两个关键因素影响页面的性能
2 .需要管理的合成器数量
3 .使用的动画属性
4 .
对动画使用transform和opacity
1 .使用这两个属性可以便面布局和绘制阶段,直接是合成修改阶段
2 .使用transform和opacity属性的时候,这些属性必须在自己的合成层上面
提升动画元素的层数
.moving-element {
will-change: transform;
}
//把需要修改的元素单独抽离出一个层
管理图层并且避免图层爆炸
1 .不要把所有的元素都单独成一个层,只给有需要的元素开辟单独的层数
2 .因为每一个层绘制纹理都需要上传到GPU,因此CPU和GPU上的纹理可用内存上存在一定的限制
使用chrome devTools了解应用中的图层
1 .f12 show layers
2 .使用左边的试图,可以追踪您拥有的图层数量,为什么创建这个图层。