聊聊打造HTML 5动感影集的爱恨情仇[页4]

他的肉棒,产后怎样保养,护理专业个人简历范文

　　显示层块边框。这功能会让所有层块元素展示黄色的边框，可以方便定位元素的布局是否合理。

　　显示FPS计量器。这功能会在页面右上角展示一个FPS计量器，实时展示FPS数，可以方便地在做一系列操作的时候发现性能瓶颈卡在哪里。

　　展示滚动表现。这功能是使页面滚动变得缓慢，对触摸和滚动事件的监听会使滚动延迟，可以通过这个功能查看滚动时期的瓶颈。

　　二、洞察技巧 —— 如何发现性能问题

　　上面说了性能分析的工具，下面应该说说检测动画性能问题的办法。动画性能分析主要用到Timeline帧模式+Rendering的开启绘制闪烁和显示层级边框功能。

　　用法1：检查卡顿情况

　　打开帧模式，点击录制按钮，开始录制页面操作，之后结束录制，查看柱状图。发现低于60fps的柱形，点击具体的帧率柱，查看记录详情，根据左边的信息定位问题所在，如下图：

　　用法2：查看层级与多余布局块

　　有时候感觉页面卡，可能会是因为层块多没有处理好显隐。可以通过功能面板的paint选项卡开启渲染截图。

　　该功能开启后，再次录制操作，结束后可以在详细数据面板看到每一个柱形图的即时渲染截图，通过移动和查找可以看出哪些块是不应该出现的，从而把它解决掉。

　　用法3：查看多余或重复渲染的结点

　　勾选Rendering中的Enable paint flashing和Show layer borders。直接操作页面，可以看到操作期间是否会有意料之外的块状渲染(渲染的结点会呈现绿色框框)，若有问题则删除多余结点再次尝试，逐渐定位出有问题的结点。

　　以上三个功能可以帮助你发现很多性能的问题。

　　三、江湖事迹 —— 动感影集性能案例

　　说了那么多，现在就来分享三个开发过程中的简单性能案例。

　　1. 封尾扩散动画

　　动感影集的封尾页会用到一个通用的页尾，动画很简单，是一个圈圈由中间向两边扩散。实现也很快，马上会想到border动画，把border由0px->1000px，在PC看没问题，于是就有了这个。

　　但是，在小米2S看的时候就发现结束的时候十分卡，看了下前面的元素都是渐现动画，不可能呀，于是用Timeline工具分析了一下。

　　各种绿色!说明是painting(渲染)引起的性能问题，因此毫无疑问是动画原因了。同时我还看了下Paint面板：

　　发现了一个十分大的层在绘制(绿色部分)，发现是bg-border这个结点的问题。于是我查看了该结点的动画：

　　会不会就是这个结点的border动画引起的?那试试换一种写法，我把border值固定，通过transform:scale来改变大小，实现了一样的效果。

　　再看看timeline?

　　O.M.G!除了刚开始绘制的消耗外，其他时候已经不会产生太多严重消耗，总体FPS维持在60以上(十分流畅)，而且层的大小也自然降了下来。

　　结论： border动画在低端机器可能会产生性能问题，看情况使用其他方式代替。

　　2. 前景放大动画

　　在邀请函模板里有一个前景由小变大的动画，但是在安卓机上产生了严重的渲染异常，如下图：

　　在IOS机器上没有重现，循例我查看了timeline。发现上面也没有异样，性能还是能保持流畅。那么问题出在哪里呢?

　　我查看了这区域的代码，这里是一个影集间的相片切换效果，其中上一个效果结束会加上一个.animate-b的类，作用了这个类将会有一个渐隐的动画;与此同时新的页只要加上.animate类就开始播放。这是通过js控制两个类来实现不同类型动画的切换。

　　那么问题是否出在这里呢?于是我把渐隐动画去掉，播放完的页面直接隐藏掉，不让动画播放，然后新动画调整到直接播放不渐现的效果。

你想破脑袋做出来的H5

上个月，环球音乐在加拿大多伦多的一块30X60英尺的户外广告就产生了这种魔性的效果。一块黑色的幕布，上面写着THE6(God)ISWATCHING，来自获得美国今年第一张白金唱片的说唱歌手Drake。