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

原因：CSS3新添加的Transform不会导致文档的重新布局。简而言之就是浏览器的主线程会估算款式布局等，然后交给GPU去渲染，在这个过程是浏览器将位图加载到 GPU 的显存是比较历时的，而更改诸如height的transition动漫过程中，每一帧都对布局有影响因而浏览器会重新布局之后交给GPU重新渲染。但是Transform则不会影响，浏览器只须要一次生成这个元素的位图chrome加载时transition页面混乱chrome加载时transition页面混乱，并在动漫开始的时侯将它递交给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 - 前端性能监控神器