requestAnimationFrameでいくらか安定したフレームレートを達成しましたか？

Question

私は​​で遊んでいますが、Chrome以外のブラウザでは非常にぎこちないアニメーションが得られます。

は、私はこのようなオブジェクトを作成します。

var object = function() { 

    var lastrender = (new Date()).getTime(); 
    var delta = 0; 

    return { 

     update: function() { 
      //do updates using delta value in calculations. 
     }, 

     loop: function() { 
      var looptimestamp = (new Date()).getTime(); 
      delta = looptimestamp - lastrender; 
      lastrender = looptimestamp; 

      this.update(); 

      window.requestAnimationFrame(this.loop.bind(this)); 
     } 
    }; 
} 

今私はcanvas要素の1つの四角形を描画していますし、それを周りに移動します。これは、プロセッサ上での非常に軽量な操作です。これはChromeで非常にスムーズに実行されていますが、ログにデルタ値を記録すると、ほぼ一貫して約17になります。私はFirefoxやSafariで同じことを行う場合は、私は次のデルタ値を取得する：

17-3-17-2-32-34-32-31-19-31-17-3-0-14-3-14-35-31-16-3-17-2 ... and so on 

ブラウザは非常にうまく表示と同期されていない、とChrome以外の他のすべての例では、1のだろうかのように見えます16ミリ秒をターゲットタイムアウトとして使用して、古いsetTimeoutメソッドを使用してスムーズなアニメーションを取得します。

Chrome以外のブラウザで​​を使用してスムーズなアニメーションを作成することができますか？ Firefoxで上に掲示された値よりも安定したデルタ値を得ることに成功した人はいますか？

if (delta > 5) this.update(); 

Answer 1

あなたはスムーズなアニメーションを得る可能性がありますキャンバス。私はブラウザでのパフォーマンスの実際の詳細を知らないが、Firefoxはすぐにフレームレートの低下を起こし、クロムではしばらくしてドロップが発生する。

フレームレート低下の実際の問題は、キャンバス要素が占有していたメモリのためです。キャンバスに何かを描画するたびに、その操作はキャンバスのパスに保存されます。このパスは、キャンバスに何かを描画するたびに多くのメモリを占有します。キャンバスのパスを空にしないと、フレームレートが低下します。 context.clearRect(x, y, w, h);でキャンバスを消去してキャンバスパスを空にすることはできません。代わりにcontext.beginPath();で新しいパスを開始してキャンバスパスをリセットする必要があります。例：

// function that draws you content or animation 
function draw(){ 
    // start a new path/empty canvas path 
    canvas.beginPath(); 

    // actual drawing of content or animation here 
} 

Answer 2

アニメーションのスムーズなフレームレートが低下する理由は理由に関してと、ブラウザのメモリである：デルタ<しきい値、たとえばときに、更新をスキップする場合