动画性能优化－requestAnimationFrame、GPU等

最近在做一个场景动画，有一个欢迎界面和一个主动画界面，两个界面之间的连接通过一个进度条来完成，当进度条完成，提供通往主动画的按钮。

画面会从一个个的场景移动过去，用户可通过点击抽奖、查看气泡商铺等进行交互，同时可拖动画面，前移或后退。该项目中，出了主动画，还有人物场景对话的动画等，性能的优化、用户的体验变得尤为重要，这里总结一下在开发过程中使用的一些性能、体验优化方法。

1、动画
　　a、优先采用requestanimationframe，实现动画帧的并发渲染；
　　b、做减法：兼容低版本浏览器（a中的元素不生效，通过setTimeout实现动画），保留主动画性能，去除重要性不大的动画（跑马灯、过程小动画等）；
　　c、大图动画性能消耗非常大，使用translate3d实现GPU加速，动画结束、暂停时，切换回2d，取消加速；
　　d、按需加载／卸载动画;

e、每个动画帧处理函数简化，尽量减少或者去除回流、重绘。

2、加载、用户体验优化
　　a、首屏优先加载，保证用户体验的流畅性：优先欢迎界面（即首屏）图片资源的加载，所有图片loaded以后，再启动主动画资源的加载，与进度条动画；
　　b、资源的预加载：在进入主动画之前，进行主动画各资源的加载，当完成加载时，再promise结束进度条动画；

c、常规优化：雪碧图、压缩、base64等；

d、存储dom变量，减少dom tree的查找等；

e、限频。

3、说明

3.1、requestAnimationFrame　　

它是一种高级的方法，存在兼容性问题。主要运作方式是浏览器要进行绘制的时候（一般16.7ms一次绘制），会通知requestAnimationFrame们，requestAnimationFrame们就跟它一起绘制。这里有几个好处，多个requestAnimationFrame可以同时进行，而setTimeout需要独立绘制；页面切换等情况，浏览器不再绘制该页面，requestAnimationFrame也停止了绘制，与浏览器同步，资源很省。相对setTimeout，是一个js的执行栈，只能串行执行，并且会影响其他js的处理。所以，使用前者，性能更佳，更流畅，交互体验更佳。特别是多个动画同时进行时，前者毫无压力，后者表示卡顿厉害。兼容代码如下，引自张鑫旭的log，感兴趣的同学可以仔细读一下：链接

 1 /* requestAnimationFrame.js
 2  * by zhangxinxu 2013-09-30
 3 */
 4 (function() {
 5     var lastTime = 0;
 6     var vendors = ['webkit', 'moz'];
 7     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 8         window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
 9         window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // name has changed in Webkit
10                                       window[vendors[x] + 'CancelRequestAnimationFrame'];
11     }
12
13     if (!window.requestAnimationFrame) {
14         window.requestAnimationFrame = function(callback) {
15             var currTime = new Date().getTime();
16             var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
17             var id = window.setTimeout(function() {
18                 callback(currTime + timeToCall);
19             }, timeToCall);
20             lastTime = currTime + timeToCall;
21             return id;
22         };
23     }
24     if (!window.cancelAnimationFrame) {
25         window.cancelAnimationFrame = function(id) {
26             clearTimeout(id);
27         };
28     }
29 }());

3.2、项目中的减法

这种要做减法的情况下，最佳的体验是自己把动画都完成好，直接演示给产品、设计童鞋看，他们就能从中取舍了，没有任何的扯皮、分歧。tips：当然动画不需要跟实际用的一致，几个特性差不多就好，比如主动画背景图非常大，多个动画并行，且持续时间比较长。

3.3、关于大图动画

这种动画渲染的性能消耗往往非常大，考虑开启GPU来加速图层的渲染，但是由于GPU的渲染又是非常耗费内存、电量的，所以在不需要移动的情况下，需要关闭GPU，防止浏览器的崩溃。在该项目中，当用户进行游戏交互等，触发主动画暂停时，将通过设置translate2d，取消加速；启动时，再开启。

3.4、按需加载／卸载动画

对于场景动画来说，有些动效，只有出现在视口时，才有播放的必要性；离开视口，就可以关闭。通过判断动画当前的位置，可以实现动画的按需加载。

3.5、重绘、回流

动画帧内减少处理，即避免长时间的js执行；减少回流、重绘在哪里都适用，可以用transform等操作，来替代position；left等等的操作。当需要display:none的情况下（回流），使用opacity:0（重绘）；或者visibility:hidden（重绘），将更优。回流的性能消耗要远大于重绘。

3.6、首屏优先加载

在网速很可观的情况下，完全可以同时加载整站的资源，仅将首屏的资源前置即可。

但在网络状况很抓狂的情况下（如3g下），这种大量图片、音频的页面，就需要考虑资源分批启动加载的必要性了。在网速欠佳，但是服务器允许多并发的情况下，同时可以请求多个资源，此时带宽及其有限的，虽然整体的加载时间没变化，但是首屏的加载时间却延长了。如当前带宽时750kb/s，10个资源一起请求，则每个分到75kb/s，150kb的图片，需要加载2s；如果只有3个资源一起请求，分到250kb/s，需加载0.6s。因此，为了体验更佳，首屏的资源加载完毕，再开启主动画资源加载。

3.7、资源的预加载

因为主动画中的交互、资源较多，需要资源稳定以后才能有更好的用户体验，所以这里提供了资源的预加载。

图片预加载：

newImgObjs[i] = new Image();
newImgObjs[i].src = animationImgs[i];newImgObjs[i].onload = function() {loadeds++;if (loadeds == newImgObjs.length) {self.barObj.completeWelcomePromise.resolve();console.log('图片资源已经加载完成');}
};newImgObjs[i].onerror = function() {loadeds++;if (loadeds == newImgObjs.length) {self.barObj.completeWelcomePromise.resolve();console.log('图片资源已经加载完成');}
};

　　　　　　音频预加载：

$audio[0].src = imgPath;
$audio.on('canplaythrough', function() {loadeds++;if (loadeds == (newImgObjs.length + 1)) {self.barObj.completePromise.resolve();console.log('音频资源已经加载完成');}
});$audio[0].onerror = function(e) {loadeds++;if (loadeds == (newImgObjs.length + 1)) {self.barObj.completePromise.resolve();console.log('音频资源已经加载完成');}
};

3.8、其他几种

限频、dom操作、雪碧图等不再多说。关于响应式下的雪碧图处理，上一篇博客有提供系统的解决方案。

4、promise的使用　　

在该项目中，promise的使用较为频繁，包括ajax请求、图片的预加载、进度条的处理等。

// 资源处理：预加载、监控加载完成、渲染
$.when(self.cmsInfoPromise, self.goodsInfoPromise, self.barObj.completeWelcomePromise).done(function() {// 进度条动效
        self.barAnimation();self.handleResource();self.renderStores();});

转载于:https://www.cnblogs.com/hity-tt/p/6420749.html

动画性能优化－requestAnimationFrame、GPU等相关推荐

css+动画优化,css3动画性能优化--针对移动端卡顿问题
一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...
unity 性能优化之GPU和资源优化
Shader相关优化众所周知,我们在unity里编写Shader使用的HLSL/CG都是高级语言,这是为了可以书写一套Shader兼容多个平台,在unity打包的时候,它会编译成对应平台可以运行的指 ...
android帧动画卡顿现象,css3针对移动端卡顿问题的解决(动画性能优化)
一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...
JavaScript动画性能优化
1.使用单个定时器使用多个定时器会迅速增加CPU的占用率.如果想同时实现多个动画,应该尝试使用一个定时器控制他们.每个定时器会导致浏览器重绘一个或多个屏幕元素.显然,如果全部的动画元素只进行一次重绘 ...
移动平台Unity3D 应用性能优化
WeTest 导读做了大概半年多VR应用了,VR由于双眼double渲染的原因,对性能的优化要求比较高,在项目的进展过程中,总结了一些关于移动平台上Unity3D的性能优化经验,供分享. 一.移动平 ...
性能更好的js动画实现方式——requestAnimationFrame
用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是 ...
手机端html5 面试,今日头条张祖俭 - H5动画在移动平台上的性能优化实践
1.H5动画在移动平台上的性能优化实践今日头条张祖俭 2.大纲 Part 1. H5动画在移动平台上的性能问题 Part 2. 解决思路-从浏览器渲染入手 Part 3. 在H5Animato ...
【腾讯优测干货分享】使用多张图片做帧动画的性能优化
本文来自于Dev Club 开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57fc8cea302e4725036142f6 使用多张图片做帧动画的性能优 ...
GPU渲染技术及性能优化
GPU渲染技术及性能优化背景:在我们做图形界面程序开发时,不得不考虑一个问题是GPU渲染性能,GPU是否能支持我们想象中炫酷的设计和动画,这就需要我们对GPU渲染技术有一定的了解,这样我们才能在开发 ...

动画性能优化－requestAnimationFrame、GPU等

动画性能优化－requestAnimationFrame、GPU等相关推荐

最新文章

热门文章