聊聊打造HTML 5 动感影集的爱恨情仇

　　动感影集是QQ空间新功能，可以将静态的图片轻松转变为动态的视频集，且载体是HTML5(简称H5)页面，意味着可以随时分享到空间或朋友圈给好友欣赏。移动端区别于PC年代的相册视频，由于设备性能限制，每一个动画细节都需要认真优化，今天就来说说动感影集开发过程中的动画性能检测与优化的问题。

　　一、先利其器 —— Chrome Timeline&Rendering

　　性能分析前，我们先看看工具。Chrome浏览器带来的两个工具是发现性能问题的利器，它们是Timeline和Rendering。

　　Timeline

　　Timeline是一款基于录制的工具，通过录制在浏览器中的一系列操作，系统会记录这个过程的所有细节数据，包括js计算、页面重绘、复合层消耗等，同时还保存着这个过程每一帧的截图。

　　使用方法：

　　打开Chrome开发者工具，选择Timeline。点击左上角小圆点录制操作，然后在要检测的页面上做一系列交互操作，结束后再次点击圆点停止，最后操作期间的一系列数据就会以图表等的形式呈现在面板中。

　　它有四种事件，对应四个颜色。如下图，网络和DOM解析(蓝色)，JavaScript计算(黄色)，样式重计算和布局(紫色)以及绘画和合成(绿色)事件。

　　它有三个模式：帧模式、事件模式和内存模式。

　　（1）帧模式

　　帧模式需要选中帧视图(柱形图按钮)开启。该模式是检查动画性能最常用的模式。

　　注意到，帧查看器有两条分界线，分别是30fps和60fps。

　　这需要我们重温fps(每秒传输帧数)的概念：

　　若动画表现fps大于60，则超越了人眼能反映的刷新频率;

　　如果fps小于30，则卡顿明显;

　　也就是说fps要保证接近60才能保证流畅。点击这里可以看到30fps和60fps的明显区别。回归到帧模式柱状图，不难看出柱状图柱高越小表示动画越流畅。

　　同时通过点击柱状图还可以看到CPU、内存的详情，以及找到对应脚本和结点定位。

　　基本用法：

　　点击录制->开始页面动画->结束录制

　　通过查看柱状图记录出哪些柱比较高(性能差)

　　点击柱图定位事件记录，结合详情数据找出性能卡顿的原因

　　（2）事件模式和内存模式

　　事件模式需要点击事件按钮开启(如图左侧蓝色)，而内存模式是可以同时显示在帧模式或事件模式中，只需要勾选Memory面板即可。

　　事件模式是以事件为导向，观察录制间操作的事件经过，方便定位哪个操作占用的事件比较频繁。同时结合内存面板，可以看得出哪个事件消耗的内存最大，有没有合理地进行垃圾回收(GC)。

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。