html画布动画口吃答案

【问题标题】：html canvas animation stutterhtml画布动画口吃
【发布时间】：2014-04-20 04:19:31
【问题描述】：

谁能解释为什么提供的画布动画会卡顿？我创建了一个测试存根来演示这个问题。

我在桌面上的 FF、Chrome、IE 和 Android 上的 FF 和 Chrome 中看到了卡顿。

卡顿是因为垃圾回收吗？似乎 raf 在每次调用时都会生成一个 double，最终需要 gc。如果 gc 是原因，那么 html5 动画几乎是 doa。叹息。

一年前有人问过同样的问题，但由于我是新成员，我无法联系作者以找出他的解决方案。 HTML5 Canvas DrawImage Stutter / Choppiness 。真是太糟糕了，新用户无法引起其他用户的注意，因为其他问题的作者可能拥有我正在寻找的信息，而根本没有发布。我尝试发布他的问题以引起他的注意，但我在那里的帖子被删除为违反规则（这是）。估计我别无选择。代表鸡和蛋的问题。

【问题讨论】：

我无法让您的示例正常工作，但请尝试减少 deltaX（可能 == .05）。
我重新发布了示例代码。您应该能够将其复制到文本文件中并将其加载到浏览器中。
我在 FF 中遇到了一个小问题，但在 IE 或 Chrome 中没有问题。我无法测试苹果。如果您使用 CSS 定位来移动 img 元素而不是 Canvas，是否会出现障碍？我赞成你的问题，所以你有更多的代表:)
我在 Win7 和 Android 上的 FF 和 Chrome 中看到了问题。尝试在 x 轴上将浏览器窗口拉伸到最大值。我在 4 岁的 iTouch 上运行的 Safari 上看不到它。谢谢你的代表。由于我无法联系到他，您能否让上一个问题的作者联系我？

标签： javascript google-chrome animation canvas vsync

【解决方案1】：

好的，所以在拔掉头发 1.5 天后，我想我有答案了。似乎浏览器与监视器同步，我想这是调用 requestAnimationFrame 的重点。在多显示器系统上运行时，同步机制似乎会混淆。我有三台显示器。当我断开除一台显示器外的所有显示器并重新启动浏览器时，问题似乎消失了。这种情况是有道理的，因为问题是偶尔出现的，也就是说，我猜测给定监视器何时与哪个监视器不同步，哪个监视器正在向浏览器提供 vsynch。

由于我不确定这一点，我希望其他人能够证实或否定我的理论。我将继续（重新）测试不同的显示器配置，但如果能得到另一个大脑和眼睛的确认，那就太好了。

编辑 01：我并不完全疯了。 http://news.softpedia.com/news/Firefox-Nightly-Adds-Support-for-Vsync-for-Smooth-Animations-360245.shtml

编辑 02：一些 chrome 用户/开发人员发现了这个问题或相关问题。最后可能会解决这个问题。见https://code.google.com/p/chromium/issues/detail?id=422000。顺便说一句，IE11+ 没有这个问题。开始使用 IE11 进行基线测试，因为 chrome 最近遇到了 QA 问题。

编辑 03：刚刚遇到类似的问答。第一个答案中的好信息。 Chrome requestAnimationFrame issues

【讨论】：