Javascript 速度 - Chrome v Firefox答案

【问题标题】：Javascript Speed - Chrome v FirefoxJavascript 速度 - Chrome v Firefox
【发布时间】：2011-03-10 13:37:57
【问题描述】：

我在http://amarnus.me/games/dodge 写了这个小游戏。现在，如果您尝试在 Firefox 和 Chrome 中玩游戏，您会清楚地注意到它在 Firefox 中的速度要慢得多。您可以称其为无意的作弊码，是的。 ;-)

所以我的问题是 - 与 Chrome 相比，这是因为 Firefox 中的 Javascript 引擎较慢吗？还是跟坏的coding有关？（在我的辩护中，我是一个 Javascript 新手）

假设是前者，那么这不是反对（劣势）HTML5游戏的点吗？（像我一样使用<canvas>标签的人）

【问题讨论】：

令人上瘾的游戏。 17 级，在 Chrome 上闪避 83 次，在 1 级，在 Firefox 上闪避 0 次。这件事在 Firefox 上太慢了，我不得不移动栏。
也许 8ms 的间隔对于 ff 来说太小了..
40 级，在 Firefox 4.0b2 上闪避 195 次。好的，这太慢了。
在我的 1.6 GHz Intel Atom 机器上，Firefox 和 Chrome 都反应迟钝。在后者中，移动的方块击中了已经在 2 级的敌人，因为我无法足够快地让开（好吧，我也有点累了）。
谢谢@galambalazs。你说的对。我也是那么想的。将其设为 10 确实使两个浏览器之间的速度达到了相当的状态，但这是以按键响应速度为代价的。如，差异很小，但我仍然能感觉到 =)

标签： javascript firefox html google-chrome canvas

【解决方案1】：

Firefox 在 javascript 中比 chrome 慢。但是，我相信使用 canvas-tag 也会更慢。这可能会在 ff4 中得到改善（您尝试过 beta 版吗？）。

还有一个使用 js 和 canvas 的网络上的 nes 模拟器，它在 chrome 上以大约 30fps 的速度运行（如果我没记错的话），但在 ff 中只有大约 10。

时间可能是你最好的朋友 :-P，尽管你总是可以尝试优化。

我相信浏览器游戏会及时出现，但它还没有为任何太先进的东西做好准备。也许大约是 ie12 出来的时候：-P。

[编辑] 顺便说一句：我在 FF4b1 中尝试过这款游戏，我认为它运行得很好。可能没有chrome那么快，但离它不远:)。

【讨论】：

+1 表示canvas 评论。 Chrome 比 FF 3 更优化了该元素。
Chrome 并不像 Firefox 那样“优化”画布。 Firefox 4 具有 GPU 加速功能，使其在鱼缸演示中的性能甚至优于 MSIE 9。
FF4b1默认禁用硬件加速，见wiki.mozilla.org/Platform/GFX/Direct2DDemo激活它

【解决方案2】：

jQuery animate 执行类似于您的 DOM 对象移动的操作。

我会查看他们的代码，看看他们是如何进行实际移动的，这可能是最有效的方式，因为它是内置在 jQuery 中的。

【讨论】：

【解决方案3】：

Chrome 是 designed 拥有更快的 Javascript 引擎。

我认为它没有说明 HTML5 游戏。您总是会发现用户的设置比其他用户更快或更慢，无论是硬件、软件还是用户保持多个应用程序同时运行的个人习惯。如果您的游戏是用 Flash 或 Java 编写的，那么硬件较慢的用户也会看到类似的减速。

您可以对代码进行更改以加快速度。我没有详细检查它，但我看到你有像if(dodge.goRight == true ... 这样的构造。虽然不是缓慢的原因，但这确实暗示您可能没有在任何地方使用最佳解决方案。

【讨论】：

虽然在大多数速度测试中 V8 确实比 Tracemonkey 表现更好，但我认为“旨在拥有更快的 JavaScript 引擎”的措辞有点令人困惑。我将自己写更多评论来更详细地解释这一点。
+1 很好的比喻。与硬件的比较对我来说确实有意义，但它是否像这样引人注目？再说一次，这将取决于应用程序。嗯..

【解决方案4】：

您可以使用 IE 站点测试您的浏览器 javascript 引擎。

http://ie.microsoft.com/testdrive/

他们声称拥有 IE9 中速度最快的 javascript 引擎

【讨论】：

你考虑过他们会这么说吗？（并不是说我是那个投反对票的人）
这里是测试站点。他对此测试浏览器。只需从 chrome 和 firefox 进入此站点。您对它与此主题无关。好的，没关系

【解决方案5】：

我将其中很大一部分归咎于 setTimeout 和 setInterval 在 IE 和 Firefox 等浏览器中的最小值约为 10 毫秒。如果页面天真地使用 0ms 以尽可能快地运行，则最初采用此方法是为了阻止页面消耗整个 CPU。 Chrome 无限制启动，但现在 moving to a 4ms minimum 符合 HTML5 中的建议。

John Resig has some awesome posts 调查 setTimeout 限制和准确性。

Mozilla 浏览器实际上可以通过每个 setInterval 调用告诉您它们运行的时间有多晚（或多早！）。查看 MDC setTimeout 文章（谷歌“mdc settimeout”并查看语法部分中的灰色注释）。

除了计时器问题之外，Firefox 的 JS 执行速度通常较慢（至少目前如此），而且感觉 Skia（Chrome 的图形库）在光栅化方面也更快。

希望这会有所帮助:)

（我最初在这里有一堆有用的链接，但这是我的第一篇文章，垃圾邮件过滤器打了我一巴掌。）

【讨论】：

【解决方案6】：

为了获得帮助，您可以考虑提供脚本的非缩小版本。

我看到您的代码中有 8 毫秒的 setIntervals。如上所述，Firefox 永远不会低于 10 毫秒（至今）。不过，在 FFox 4 中玩游戏非常有趣。我看到两个非常小的问题，显然是由垃圾收集引起的。 Chrome 在这方面比 Fox 更有优势。尽管 SpiderMonkey（在 Firefox 中处理 GC）从 3.5 到 3.6 有了显着改进，但对于许多游戏来说仍然不够好。在 4.0 中它要好很多，但仍然不如 Chrome 或 Opera。（正在处理中。）

玩游戏并简要查看您的代码，我发现没有任何复杂性会导致 Firefox 无法处理正在发生的事情。此外，Firefox 4 具有硬件加速 Canvas，比 IE9 略快，但比 Chrome 快很多。

网络上有一种说法，认为 Chrome 在画布方面比 Gecko 更快，但这是因为人们很少分析他们的网页。事实上，Firefox 3.6 中的 canvas 至少已经和 Chrome 一样快了，但是由于 JavaScript 速度较慢，许多测试都没有显示出来。（并且一些 JavaScript 测试速度较慢，因为 Firefox 不能很好地处理测试工具。）

所有这些都会导致很多混乱和错误信息。底线是你的游戏在 Firefox 4 中应该没问题。你应该看看是否有什么可以做的，以避免触发不必要的 GC。例如。您是在重复使用变量还是创建不必要的新变量？

但是，在 Opera 10.53 中，这并不令人愉快。不是因为 Opera 跟不上速度，而是因为底部没有移动，而是保持静止，整个运动场都在移动。（尽管如此，我还是设法在第一次尝试中达到了 17 级。）在 Opera 10.6 中，页面无法正确加载。

您可能需要调试您的代码 - 或者如果它是回归，则可能需要向 Opera 提交错误。（我会发推文来引起他们的注意。）

【讨论】：

来自游戏源代码：“{if($.browser.webkit){browserName="Chrome"}else{if($.browser.mozilla){browserName="Firefox"}}”。这使得它在 Opera 中失败并出现异常，因为没有在任何地方为这种情况定义 browserName。请解决这个问题。
并使用能力检测修复它。不需要浏览器嗅探，也是不好的做法。

【解决方案7】：

试试这个技巧：setTimeout with a shorter delay

如果有帮助，请告诉我。我现在有点好奇。 :)

祝你好运！

【讨论】：