如何在CPU功能方面实现渲染器

Question

我想知道在JavaScript中实现渲染器的最佳方法是什么。这不是渲染的内容部分，这在这里非常重要 - 我更愿意听到何时以及如何有效地运行渲染器代码。

目前，我有window.setInterval(renderFunc, 1000 / 20)，每隔50毫秒就会渲染一帧（即fps = 20）。

重点是更快的计算机不会渲染更多的帧，而且速度较慢的计算机将无法赶上20 fps，因此调用的函数比计算机可能处理的更多。

我在考虑一个while(true)循环，但这会使用100％的CPU并冻结计算机本身 - 所以实际上我的游戏（渲染器是我的3D游戏）将不再可玩了你不能再点击按钮了。

这种情况下最有效的选择是什么，还是有更好的方法没有出现在我的脑海中？

提前致谢。

Answer 1

有一个专门为动画制作的功能，名为window.requestAnimationFrame。这意味着浏览器选择何时调用动画函数而不是硬编码间隔。使用它带来了很多好处：

• 更快的计算机将获得更高的帧速率
• 不可见的Windows /标签更新频率
• 根据CPU使用率改变帧速率

本文介绍如何以跨浏览器方式使用它： http://paulirish.com/2011/requestanimationframe-for-smart-animating/

该文章还链接到http://jsfiddle.net/paul/XQpzU/2/

Answer 2

尝试在Web工作线程中尝试while(true)循环。这应该可以防止浏览器锁定。请注意，您无法在工作线程中直接操作<canvas>或DOM的任何其他部分。

https://developer.mozilla.org/En/Using_web_workers

Answer 3

您可以计算帧渲染所需的时间，并调整帧间距以获得可接受的负载。例如，如果当前帧需要5ms渲染，并且您想要50％加载，请在下一帧之前等待5ms。你需要对它进行一些健全性检查，也可能使用最后几帧的时间。

Answer 4

“setInterval（）将传递回调被调用的毫秒数”   - https://developer.mozilla.org/en/window.setInterval

您可以使用它来动态调整间隔时间。

N.B。 MDC文档适用于由Mozilla实现的Javascript，而不是ECMA脚本或其他实现。您应该检查这是否适用于其他浏览器。