动画性能优化－requestanimationframeGPU等

Posted 2020-08-31

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

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

 

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　　

　　　　它是一种高级的方法，存在兼容性问题。主要原理是浏览器并行的渲染n个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操作、雪碧图等不再多说。关于响应式下的雪碧图处理，上一篇博客有提供系统的解决方案。

 

　　3.9、promise的使用　　

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

　　　　

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