61

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ます。複数回呼び出すときにコールバックをキューに入れていますか?

4

4 に答える 4

12

これらの回答のいずれも、私が探していたものを実際に説明しているとは思いません。

requestAnimationFrame() によってキューに入れられたコールバックが、1 つのフレーム ( mdn )で複数のコールバックを起動し始めるとき

これは後者を示唆しており、同じフレームで複数のコールバックを呼び出すことができます。

以下のテストで確認しました。60 Hz のリフレッシュ レートは、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);

于 2020-04-22T14:22:23.120 に答える
8

do スタックrequestAnimationFrameへの呼び出しとして1 つの呼び出しのみを使用する必要があります。requestAnimationFrameしたがって、単一のコールバック バージョンの方がパフォーマンスが高くなります。

于 2013-06-14T08:10:16.870 に答える