javascript - 多个 requestAnimationFrame 性能

Question

如果我正在制作多个动画，添加多个 requestAnimationFrame 回调在性能方面是否可行？例如:

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”得到去抖动(即每帧出队 1 个)或在下一帧中全部被调用。

When callbacks queued by requestAnimationFrame() begin to fire multiple callbacks in a single frame (mdn)

这表明后者，可以在同一帧中调用多个回调。

我通过以下测试确认。 60 赫兹的刷新率转换为 17 毫秒的周期。如果是前者，则不会有 2 个时间戳彼此相差 17 毫秒以内，但事实并非如此。

let sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

let update = async timestamp => {
  console.log('update called', timestamp)
  await sleep(10);
  requestAnimationFrame(update);
}

requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);
requestAnimationFrame(update);