聊聊打造HTML 5动感影集的爱恨情仇（动画性能篇）

加减乘除速算方法,黄灿盛整容对比,重庆财经职业学院

学生教材网的小编为您介绍聊聊打造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)。

　　同时注意到这里勾选了Screenshots面板，这个面板记录了过程间的屏幕截图，更方便定位有性能问题的操作区间，发现问题所在。

　　Rendering

　　Rendering处于开发者工具的隐藏面板中，打开Chrome开发者工具然后按ESC键打开。

　　它有四个功能：

　　开启绘制闪烁提示。这功能会让页面在渲染的时候闪烁绿色，你可以借此增删元素查看哪些元素是绘制消耗最大的。(该功能替代了旧版的Show paint rectangles+Enable continuous page repainting，Chrome46。)

聊聊HTML5小游戏的制作技巧及经验

今天腾讯的同学从一款HTML5小游戏《植物大战僵尸》说起，分享一些动画实现的知识(动画可控性、如何兼容不同分辨率、如何识别平板手机等)，附上众多实现小技巧，来收

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

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