requestAnimationFrame 优化Web动画

binta 发布于2019-08-22 10:51 / 841人阅读

摘要：会存在过度绘制，会造成帧丢失，继而导致动画断续显示。浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。通过，动画能够和动画变换或动画同步发生。

就终极目的来说，requestAnimationFrame就是setTimeout。既然有了setTimeout，那还要requestAnimationFrame来干嘛。setTimeout会存在过度绘制，会造成帧丢失，继而导致动画断续显示。这也是setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）。

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。requestAnimationFrame就是为了这个而出现的。我所做的事情很简单，跟着浏览器的绘制走，如果浏览设备绘制间隔是16.7ms，那我就这个间隔绘制；如果浏览设备绘制间隔是10ms, 我就10ms绘制。这样就不会存在过度绘制的问题，动画不会掉帧。通过requestAnimationFrame()，JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外，如果在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减少CPU，内存的压力，节省电池电量。

requestAnimationFrame的用法

为了更好的兼容各种浏览器，加上了兼容各种浏览器引擎前缀。谷歌浏览器，火狐浏览器，IE10+都实现了这个函数，即使在ie9以下，执行requestAnimationFrame方法也不会出错。

(function() {
    var lastTime = 0;
    var vendors = ["webkit", "moz"];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
        window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] ||    // name has changed in Webkit
                                      window[vendors[x] + "CancelRequestAnimationFrame"];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    }
}());

window.requestAnimationFrame(function(/* time */ time){
  // time ~= +new Date // the unix time
});

参考文章
http://www.zhangxinxu.com/wor...
http://www.webhek.com/request...
http://blog.chinaunix.net/uid...

云服务器 GPU云服务器 requestAnimationFram web优化 web性能优化 web前端优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91375.html

requestAnimationFrame 优化Web动画

摘要：会存在过度绘制，会造成帧丢失，继而导致动画断续显示。浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。通过，动画能够和动画变换或动画同步发生。就终极目的来说，requestAnimationFrame就是setTimeout。既然有了setTimeout，那还要requestAnimationFrame来干嘛...

DirtyMind 2019-08-21 11:29 评论0 收藏0
requestAnimationFrame 优化Web动画

摘要：会存在过度绘制，会造成帧丢失，继而导致动画断续显示。浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。通过，动画能够和动画变换或动画同步发生。就终极目的来说，requestAnimationFrame就是setTimeout。既然有了setTimeout，那还要requestAnimationFrame来干嘛...

biaoxiaoduan 2019-08-20 14:04 评论0 收藏0
requestAnimationFrame 优化Web动画

摘要：会存在过度绘制，会造成帧丢失，继而导致动画断续显示。浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。通过，动画能够和动画变换或动画同步发生。就终极目的来说，requestAnimationFrame就是setTimeout。既然有了setTimeout，那还要requestAnimationFrame来干嘛...

Allen 2019-08-26 11:25 评论0 收藏0
无线页面动画优化实例

摘要：无线页面本就分秒必争，更不用说当我们在无线页面中使用动画的时候。页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。它通知浏览器在页面重绘前执行你的回调函数。无线页面本就分秒必争，更不用说当我们在无线页面中使用动画的时候。不管是css动画还是canvas动画，我们都需要时刻小心着，并且有必要掌握页面性能的基本分析方法。既然我们的目标是优化，那么...

ivydom 2019-08-19 18:12 评论0 收藏0