我想知道在 JavaScript 中实现渲染器的最佳方法是什么。这里真正重要的并不是渲染的内容部分 - 我更想知道何时以及如何有效地运行渲染器代码。
目前,我有window.setInterval(renderFunc, 1000 / 20)
,每 50 毫秒渲染一帧(即 fps = 20)。
关键是更快的计算机不会渲染更多的帧,而且较慢的计算机将无法赶上 20 fps,因此调用的函数超出了计算机可能能够处理的范围。
我在想一个while(true)
循环,但这会使用 100% CPU 并且会冻结计算机本身 - 所以实际上我的游戏(渲染器是我的 3D 游戏)将根本无法再玩,因为你无法再单击按钮。
在这种情况下最有效的选择是什么,或者有没有我想到的更好的方法?
提前致谢。
有一个专门为动画制作的功能,称为window.requestAnimationFrame
。这意味着浏览器选择何时调用动画函数而不是硬编码间隔。使用它有很多好处:
- 更快的计算机将获得更高的帧速率
- 不可见的窗口/选项卡的更新频率要低得多
- 根据 CPU 使用情况改变帧速率
本文解释了如何以跨浏览器的方式使用它:http://paulirish.com/2011/requestanimationframe-for-smart-animating/ http://paulirish.com/2011/requestanimationframe-for-smart-animating/
该文章还链接到http://jsfiddle.net/paul/XQpzU/2/ http://jsfiddle.net/paul/XQpzU/2/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)