transition做动画卡顿问题

1.在使用transition做动画处理的时候，尽量使用transform来代替height，top，margin属性。

原因：CSS3新添加的Transform不会引起文档的重新布局。简而言之就是浏览器的主线程会计算样式布局等，然后交给GPU去渲染，在这个过程是浏览器将位图加载到 GPU 的内存是比较耗时的，而修改例如height的transition动画过程中，每一帧都对布局有影响从而浏览器会重新布局然后交给GPU重新渲染。但是Transform则不会影响，浏览器只需要一次生成这个元素的位图，并在动画开始的时候将它提交给GPU去处理 。之后，浏览器不需要再做任何布局、 绘制以及提交位图的操作。自然提升了速度~

2.使用开启GPU硬件加速模式

使用方法

webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

或

webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

我觉得最初的设计可能是为了加速渲染3D样式而启动的加速模式，但我们设置值为0后，并没有真正使用3D效果，从而使用另一种方式开启了GPU硬件加速模式。

最后我发现transition过度时有图片加载也会卡顿,要提前加载好图片

3.学习使用Performance进行动画性能分析

Chrome的DevTool中TimeLine的Frame模块然后看FPS值

FPS是指画面每秒传输帧数，数值越高越流畅

一般情况每秒 60 帧是最适合人眼的交互，小于 60，人眼能明显感觉到。

修改前最高FPS和修改后最高FPS，效率有明细提升

image

image

更多参考：

前端性能优化之Performance神器

Performance - 前端性能监控利器