目前，我正在使用requestAnimationFrame（理想情况下）60 FPS 渲染 WebGL 内容。我还在同时安排一个“更新”进程，该进程使用setTimeout. 我使用后者是因为我只需要每秒更新大约 30 次对象，而且它并不是绘制序列的一部分；为实际渲染通道节省剩余的 CPU 似乎是个好主意，因为我的大多数动画都是相当硬件密集型的。
我的问题是最佳实践之一。setTimeout并且setInterval对电池寿命和 CPU 消耗不是特别友好，尤其是当浏览器不在焦点时。另一方面，使用requestAnimationFrame（或将更新直接绑定到现有的渲染阶段）可能会每秒强制执行比严格必要的更新更多的更新，并且可能会在浏览器不在焦点时或在浏览器认为的其他时间完全停止更新“动画”是不必要的。
更新但不呈现内容的最佳行动方案是什么？
setTimeout 和 setInterval 对电池寿命和 CPU 消耗不是特别友好
老实说：两者都不是requestAnimationFrame。不同之处在于，当您离开选项卡时，RAF 会自动关闭。setTimeout但是，如果您使用Page Visibility API可以模拟这种行为，因此实际上如果智能使用，两者之间的功耗问题大致相同。
但是，除此之外，setTimeout\Interval它非常适合在您的情况下使用。您可能需要注意的唯一一件事是，您将很难让它与渲染循环完美同步。在某些情况下，您可能会在动画更新命中之前绘制太多次，这可能会导致轻微的卡顿。如果您以 60hz 进行渲染并以 30hz 进行更新，这应该不是什么大问题，但您需要注意这一点。
如果与渲染循环保持完美同步对您很重要，您可以简单地if(framecount % 2) { updateLogic(); }在您的 RAF 回调顶部添加一个，它有效地将您的更新限制为 30hz（每隔一帧）并且它始终与绘图同步。