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

棋谱仓库,佳能论坛,bsmi认证

　　最后发现，问题解决了!效果如图：

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

　　3. 安卓逐帧渲染bug

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

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

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

　　心想，只能是它了，于是我把它去掉：

　　结果如我所想，页面终于流畅了：

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

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

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

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

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

　　2. 动画坑点

　　兄弟元素间动画互相影响

　　当前播放的动画会因为其他结点动画还没结束而收到影响，安卓机器上会呈现逐帧渲染的表现。

　　解决办法：处可视区域播放的动画外，将背后播放的动画display:none或者animation-play-state:pause。

　　z-index设置不当

　　兄弟元素在复合层中渲染，且z-index比主元素小，则主元素也会被加入到复合层渲染。有篇文章就是说这个问题。

　　解决办法：给作用于动画的兄弟元素设置合理z-index值。

　　3. 巧妙使用css动画

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

　　4. 是否都要GPU加速？

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

　　盲目使用会让无关元素都渲染成复合层。

　　复合层渲染成位图消耗内存，也会耗时。

　　移动端手机会因此电量消耗更快。

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

你想破脑袋做出来的H5

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