KineticJS：Firefox 与 Chrome 中的动画性能答案

【问题标题】：KineticJS: animation performance in Firefox vs ChromeKineticJS：Firefox 与 Chrome 中的动画性能
【发布时间】：2014-04-09 15:30:18
【问题描述】：

我正在使用动画模块使用 Kineticjs 运行动画。现在我注意到 Chrome 和 Firefox 之间存在相当大的性能差异。查看帧率，我发现了以下结果。

     Chrome    Firefox
avg:     50         50
min:     33         20
max:     56         75

如您所见，FireFox 的帧速率可变性要大得多。 Chrome 中的动画很流畅（至少足够流畅），但 Firefox 中的动画每秒左右时断时续，当帧率非常高或非常低时会发生这种情况。

尤其是高帧率峰值似乎破坏了流畅动画的外观。

有没有其他人经历过这种行为？有没有办法在 Firefox 中让帧率更平滑一点？

【问题讨论】：

我对 KineticJS 不熟悉，但是我已经使用 Chrome 和 Firefox 一段时间了，我可以说全能的 Chrome 只是处理动画比 Firefox 好得多。
我经历过。我不知道 FF 的问题是什么，但有时我只需要重新启动浏览器或我的计算机，然后它会再次正常运行一段时间。
同意。 FF 会出现“口吃”，尤其是在高压力动画期间。
与 KinecticJS 无关。这是更普遍的东西。例如 vis.js 或 SIMILE 时间线，当用户将其拖到 FireFox 上时，感觉更加不稳定。这是它的另一个例子：elgreco.digibis.com/en/musobjects/timeline.html?busq_concept=53
我正在 BG 制作一个带有固定画布的视差网站，并面临相同但相反的问题：Chrome 存在性能问题，而 firefox 很好。

【解决方案1】：

这可能是由于浏览器标签页架构的差异，例如当前谷歌浏览器对每个标签页使用单独的进程，因此一个标签页中的慢速或错误代码所产生的影响要小得多另一个标签中的代码。由于 Firefox 的标签在同一个进程中运行，所以一个标签上的慢代码会影响其他标签。

这也可能是由于浏览器性能差异，即您正在使用的 DOM 和 Javascript API 的实现。

有没有办法在 Firefox 中让帧率更平滑一点？

你应该尝试找到导致帧率差异的一些原因，消除过程可能是最好的路径。

尝试使用只有一个选项卡的浏览器，并查看使用的 api 列表，看看它们是否存在性能差异。

【讨论】：