2

requestAnimationFrame現在、 （理想的には）60FPSで実行されるWebGLコンテンツをレンダリングしています。また、を使用してAIや物理などを処理する「更新」プロセスも同時にスケジュールしていsetTimeoutます。後者を使用するのは、オブジェクトを1秒間に約30回更新するだけでよく、実際には描画シーケンスの一部ではないためです。私のアニメーションのほとんどはかなりハードウェアを集中的に使用するため、実際のレンダリングパスのために残りのCPUを節約することは良い考えのように思えました。

私の質問はベストプラクティスの1つです。setTimeoutまたsetInterval、特にブラウザにフォーカスがない場合は、バッテリーの寿命やCPUの消費量に特に優しいわけではありません。一方、使用するrequestAnimationFrame（または更新を既存のレンダリングフェーズに直接結び付ける）と、厳密に必要な数よりもはるかに多くの更新が毎秒強制される可能性があり、ブラウザーにフォーカスがない場合やブラウザーが判断した場合は、更新が完全に停止する可能性があります。 「アニメーション」には不要です。

コンテンツをレンダリングせずに更新するための最善の行動は何ですか？

4

1 に答える 1

3

setTimeoutとsetIntervalは、バッテリー寿命とCPU消費量に特に優しいものではありません

正直に言うと、どちらもそうではありませんrequestAnimationFrame。違いは、タブを離れるとRAFが自動的にオフになることです。ただし、 Page Visibility APIsetTimeoutを使用すると、この動作をエミュレートできます。したがって、実際には、インテリジェントに使用した場合、2つの間の電力消費の問題はほぼ同等です。

それを超えて、しかし、setTimeout\Intervalあなたのケースでの使用には完全に適しています。注意したいのは、レンダリングループと完全に同期させるのに苦労することだけです。アニメーションの更新がヒットする前に何度も描画する場合があります。これにより、小さな途切れが発生する可能性があります。60hzでレンダリングし、30hzで更新する場合、それは大きな問題ではないはずですが、注意する必要があります。

レンダリングループと完全に同期することが重要な場合はif(framecount % 2) { updateLogic(); }、RAFコールバックの先頭にを配置するだけで、更新を30Hz（1フレームおきに）に効果的に制限でき、常に描画と同期します。

于 2012-01-09T18:55:04.917 に答える