私のアニメーションのFPSを制御したいのは、requestAnimationFrameの代わりにsetTimeoutを使い続けるのがよい理由ですか？

Question

ゲームをrequestAnimationFrameに切り替える必要があるのだろうかと思います。もはやこれを行う理由がある場合、私が読んだように、主要なブラウザでタブを切り替えると、setTimeout（）も一時停止します。

とにかく、アニメーションのFPSを制御したいとします。 k.settings.engine.fpsが欲しかったFPSです

k.state.loopinterval = 
window.setInterval(renderLoop(), 1000/k.settings.engine.fps); 

：

現在、私はこのようにそれを行うことができます。

私はそれを​​やり方をすれば、私はその可能性を失い、そしてそれはちょうどそれが与えることができるものは何でも私をあげる：

window.requestAnimFrame(k.operations.startLoop); 
renderLoop(); 

を私は何人かの人々は別のループにrequestAnimFrameを配置することをお勧め見てきました：

setInterval(function() { 
    requestAnimationFrame(draw); 
}, 1000/60); 

...どうすればいいですか？それはそのままですか？

タブを切り替えるとsetTimeoutも一時停止するようになったので、requestAnimationFrameの正確なメリットは何ですか？

Answer 1

requestAnimationFrameは、アニメーションを作成する正しい方法です。

なぜですか？

ブラウザはレンダリングを最適化してよりスムーズなアニメーションを作成できるため、質問に答えるには、別の方法は次のとおりです。

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(callback, element){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})(); 

また、他の方法もあります。

requestAnimationを呼び出すと、htmlを再描画する瞬間がブラウザに表示されます。 CSSでアニメーション/トランジションを行い、素材を移動したり背景を（スプライトとして）変更した場合、requestAnimationを使用すると、requestAnimationを呼び出すとレンダリングが動作します。それがなければ、ブラウザは何時でも何かをレンダリングします。それでは、必要な再描画をさらに行うことができます。

ブラウザがどのように動作しているかにかかわらず、私たちがまだ知らない以上の最適化を行います。ブラウザが私たちが何をしているのかを理解させてから、私たちを助けます。

私が見つけたthis link、いくつかのアイデアを追加することができます