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
更多参考：
