QQ空间实战!聊聊打造HTML 5动感影集的爱恨情仇(动画性能篇) - 优设-UISDC

QQ空间实战!聊聊打造HTML 5动感影集的爱恨情仇(动画性能篇)

2015/12/10 8909评论区

html5-animation-performance-analysis-1

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

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

Timeline

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

使用方法:

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

(1)帧模式

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

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

  • 若动画表现fps大于60,则超越了人眼能反映的刷新频率;
  • 如果fps小于30,则卡顿明显;

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

基本用法:

  • 点击录制->开始页面动画->结束录制
  • 通过查看柱状图记录出哪些柱比较高(性能差)
  • 点击柱图定位事件记录,结合详情数据找出性能卡顿的原因

(2)事件模式和内存模式

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

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

打造H5动感影集的爱恨情仇(动画性能篇)

Rendering

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

打造H5动感影集的爱恨情仇(动画性能篇)

它有四个功能:

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

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

用法1:检查卡顿情况

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

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

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

1. 封尾扩散动画

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

再看看timeline?

打造H5动感影集的爱恨情仇(动画性能篇)

打造H5动感影集的爱恨情仇(动画性能篇)

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

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

2. 前景放大动画

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

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

打造H5动感影集的爱恨情仇(动画性能篇)

最后发现,问题解决了!效果如图:

打造H5动感影集的爱恨情仇(动画性能篇)

结论: 背后的动画可能会影响当前动画的播放,在安卓4.0系统都会产生渲染异常的问题,因此应该把不在当前播放的动画停掉。

3. 安卓逐帧渲染bug

更多的性能问题都不会产生严重的表现,最多是一点卡顿。但是安卓4.0的渲染异常却是常会出现,为此我再找一个例子。以下是我做万圣节活动的时候发现的一个问题,具体表现直接上图:

打造H5动感影集的爱恨情仇(动画性能篇)

这是魅族比较好的一台机器,但依然会产生逐帧渲染问题。

根据之前的例子,我第一时间会想到是否别的动画在影响?我看到这个动画作用钱有一个手一直摇一摇的动画,而且发现摇完后那个动画在背后是循环播放(infinite)的,一直没有结束。

打造H5动感影集的爱恨情仇(动画性能篇)

心想,只能是它了,于是我把它去掉:

打造H5动感影集的爱恨情仇(动画性能篇)

结果如我所想,页面终于流畅了:

打造H5动感影集的爱恨情仇(动画性能篇)

总结: 在性能检测的时候,有时候工具并不能帮到你,在找问题的时候也不要一味在当前页面找,很有可能是背后的一些无关代码在做着别的消耗性行为,因此在找不到问题的时候不妨从当前页的上下游入手。

四、熟能生巧 —— 性能优化的经验技巧

说了一些具体操作办法,最后来说一下我在开发过程中积累的经验。

1. 以下属性的更优解决方案

左侧属性都很有可能会带来性能问题。

打造H5动感影集的爱恨情仇(动画性能篇)

2. 动画坑点

  • 兄弟元素间动画互相影响
  • 当前播放的动画会因为其他结点动画还没结束而收到影响,安卓机器上会呈现逐帧渲染的表现。
  • 解决办法:处可视区域播放的动画外,将背后播放的动画display:none或者animation-play-state:pause。

z-index设置不当

  • 兄弟元素在复合层中渲染,且z-index比主元素小,则主元素也会被加入到复合层渲染。有篇文章就是说这个问题。
  • 解决办法:给作用于动画的兄弟元素设置合理z-index值。

3. 巧妙使用css动画

这是一些用CSS3来解决一般JS效果的做法。

打造H5动感影集的爱恨情仇(动画性能篇)
打造H5动感影集的爱恨情仇(动画性能篇)

4. 是否都要GPU加速?

最后,讨论一下这个问题。开启GPU加速固然会让页面动画更流畅,但是否表示所有元素都要开启?肯定不是,会有以下几个缺点:

  • 盲目使用会让无关元素都渲染成复合层。
  • 复合层渲染成位图消耗内存,也会耗时。
  • 移动端手机会因此电量消耗更快。

由此可见,如果使用GPU的元素很多,那么内存的消耗可能就远远大于动画的消耗,这就有点本末倒置了。因此,最好的办法是处理好动画层级,整合动画层一并开启GPU加速。

以上,感谢阅读,欢迎留言讨论。

【腾讯ISUX十二月份出品的干货】

H5动效的八种制作方法:
《腾讯干货!由浅入深科普最常用的八种HTML 5动效制作手法》

靠谱的布局方法是怎样的?
《设计基础功!腾讯高手教你靠谱的布局设定方法》

IOS 9人机界面指南技术篇:
《腾讯力作!IOS 9人机界面指南(3):IOS 技术 (上)》

原文地址:腾讯ISUX
作者:TQ

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量106万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/html5-animation-performance-analysis

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 转场动效 优设大课堂 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 配色 设计师专访 视觉设计 素材下载 web前端开发 设计流程 AI教程 用户体验设计 设计理论 神器下载 字体下载 海报设计 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里