目前，我使用requestAnimationFrame渲染WebGL内容，其运行时（理想情况下）为60 FPS。我还同时安排了一个“更新”过程，它使用setTimeout来处理AI，物理等。我使用后者是因为我只需要每秒大约更新对象30次，而且它并不是绘制序列的一部分;保存剩余的CPU用于实际渲染过程似乎是一个好主意，因为我的大部分动画都是相当硬件密集的。
我的问题是最佳做法之一。 setTimeout和setInterval对电池寿命和CPU消耗并不特别友好，尤其是在浏览器无法关注时。另一方面，使用requestAnimationFrame（或将更新直接绑定到现有的呈现阶段）可能会每秒执行更多的更新，而不是严格必要的更新，并且当浏览器不在焦点或在浏览器处时，可能会完全停止更新其他时候浏览器认为不需要“动画”。
更新的最佳做法是什么，但不是呈现内容？
答案 0 :(得分：3)
老实说：setTimeout和setInterval对电池寿命和CPU消耗并不特别友好
requestAnimationFrame也不是。不同之处在于，当您离开标签时，RAF会自动关闭。如果您使用Page Visibility API，则可以使用setTimeout模拟该行为，因此实际上，如果智能使用，两者之间的功耗问题大致相同。
除此之外，setTimeout\Interval非常适合在您的情况下使用。您可能想要注意的唯一事情是，您将很难完全与渲染循环同步。您可能会遇到在动画更新发生之前可能会画太多次的情况，这可能会导致轻微的口吃。如果你以60hz渲染并在30hz更新它应该不是一个大问题，但你会想要了解它。
如果与渲染循环保持完美同步对您来说非常重要，那么您可以在RAF回调的顶部放置一个if(framecount % 2) { updateLogic(); }，这有效地将您的更新限制为30hz（每隔一帧）并且它始终是与平局同步。