多个requestAnimationFrame性能

Question

如果我正在做多个动画，添加多个requestAnimationFrame回调在性能方面是否正常？ F.ex：

function anim1() {
    // animate element 1
}

function anim2() {
    // animate element 2
}

function anim3() {
    // animate element 3
}

requestAnimationFrame(anim1);
requestAnimationFrame(anim2);
requestAnimationFrame(anim3);

或者它被证明比使用单个回调更糟糕：

(function anim() {
    requestAnimationFrame(anim);
    anim1();
    anim2();
    anim3();
}());

我问，因为我真的不知道幕后发生了什么，当你多次打电话时requestAnimationFrame排队回调？

Answer 1

您应该只使用一个requestAnimationFrame调用来调用requestAnimationFrame堆栈。因此，单个回调版本更具性能。

Answer 2

Someone benchmarked this. Let's talk...

https://jsperf.com/single-raf-draw-calls-vs-multiple-raf-draw-calls

我查看了性能比较（你也应该）。欢迎您不同意。这些是在canvas元素上绘制基元。

        function timeStamp() {
          return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
        }

        function frame() {
            drawCircle();
            drawLines();
            drawRect();
        }

        function render() {
            if (timeStamp() >= (time || timeStamp())) {
                time = timeStamp() + delayDraw;
                frame();
            } 
            requestAnimationFrame(render);
        }

        function render1() {
            if (timeStamp() >= (time || timeStamp())) {
                time = timeStamp() + delayDraw;
                drawCircle();
            } 
            requestAnimationFrame(render1);
        }

        function render2() {
            if (timeStamp() >= (time || timeStamp())) {
                time = timeStamp() + delayDraw;
                drawRect();
            } 
            requestAnimationFrame(render2);
        }

        function render3() {
            if (timeStamp() >= (time || timeStamp())) {
                time = timeStamp() + delayDraw;
                drawLines();
            } 
            requestAnimationFrame(render3);
        }

我认为这段代码实际上是对7个调用timestamp（）和2个调用timestamp（）的基准测试。看看Chrome 46和47之间的区别。

• Chrome 46：12k / sec（一个电话）对12k / sec（3个电话）
• Chrome 47：270k / sec（一个电话）对810k / sec（3个电话）

我认为这是非常优化的，它没有任何区别。这只是测量此时的噪音。

我的要点是，不需要为我的应用程序进行手动优化。

如果您担心性能，请查看Chrome 59（1.8m ops / sec）与Chrome 71（506k ops / sec）之间的差异。

Answer 3

requestAnimationFrame绑定函数调用并返回frameID。请求多个帧与向事件添加多个事件侦听器不同 - 每个函数都在另一个帧中调用。因此，如果你连续地（每个函数递归地回忆起来）请求几个帧，你就会失去所有更新在一帧内呈现的好处。因此，即使存在高帧率，动画也可能看起来不那么平滑。

但是：您只能对所有方法使用cancelAnimationFrame（frameID），并且可能需要一些额外的代码来取消单个动画