【发布时间】：2012-10-26 05:10:22
【问题描述】：
我正在使用 HTML5 和 MooTools 制作一个小游戏，但我在 Firefox 上遇到了性能问题。我已经实现了一个计数器来确定我的 update 方法被调用的频率，它每秒返回 64 次。结果似乎慢得多（如 30 FPS）。我认为我的问题实际上是在这篇文章http://blog.sethladd.com/2011/03/measuring-html5-browser-fps-or-youre.html 中描述的。我找不到直接解决这个问题的方法，但我认为我可以优化性能。
我认为我的逻辑中的一个大问题是我直接在画布上绘制每个对象。我以前用 Java 做过一些游戏，在处理图像（在内存中绘制）和只绘制最终图像时，我的性能得到了很大的提升。这样一来，浏览器绘制东西的请求就会少得多，而且可能绘制得更快。
有没有办法做到这一点？我在 JavaScript 中找到了一些用于图像处理的库，但我想自己做。
我不能给你看完整的代码，因为这个项目是为学校设计的，而且它太大了（大约 1500 行代码）。
【问题讨论】：
-
你说的是“缓冲输出”。
-
好吧，首先，您应该使用
requestAnimationFrame而不是setTimeout。您可以通过不重绘所有内容而仅重绘需要更新的内容来进行一些微优化（有时这实际上是不可能的，具体取决于游戏的性质）。您还可以通过分层进行一些智能优化（不要绘制会被其他东西覆盖的东西）。但是，如果没有一些实际代码，我们无法真正提供您可能缺少的特定优化。
标签： javascript image html canvas game-engine