25

複数のアニメーションを行っている場合、複数のコールバックを追加することはパフォーマンス上問題ありませんか? F.ex:単一のコールバック使うより複数の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(); 
}()); 

を、ある​​コールバックを複数回呼び出すとコールバックをキューに入れますか?

答えて

4

​​do stackへのコールとして​​コールを1つだけ使用する必要があります。このように、単一のコールバック・バージョンはより効果的です。

+8

これは本当ですか? http://www.w3.org/TR/animation-timing/#FrameRequestCallbackによれば、コールバックはリストに格納され、順番に実行されます。 3つのアニメーションを持つ1つのコールバックが、1つのアニメーションを持つ3つのコールバックより効率的なのはなぜですか? – David

+1

@David 2つの関数呼び出しを少なくするという単純な事実のために。 –

+3

@ErikSchierboomが正しいです。関数呼び出しが少なくてもスタックのオーバーヘッドは少なくなります。しかし、シンプルさをコーディングするために、メインループの外に出ることはめったにない短命アニメーションのアプリケーションを特に見ることができます。さらに、メインループの「ホットループ」内から分岐を削除すると、リンク、リンク解除、ネイティブオブジェクトの作成などの理由でJITコンパイラのスラッシングが減少する可能性があります。 – mattdlockyer