我最近在用 HTML5 做一些实验，发现 HTML5 在移动设备、平板电脑甚至台式机上的运行似乎很糟糕。我进行了以下测试：
使用 jQuery http://erality.com/public/html5/001/在页面上移动 150 个元素
25 个元素通过 HTML5 在页面上移动 http://erality.com/public/html5/002/
jQuery 版本在台式机上运行良好，在较新的平板电脑上运行良好。HTML5 版本（只有 1/6 的元素）在台式机上运行不佳，在平板电脑上也很糟糕。这是正常的表现吗？我做错了什么吗？
任何见解都会有所帮助。
“HTML5”版本性能不佳的原因是它使用了setTimeout代替requestAnimationFrame(RAF)，这是使用 HTML5 画布为任何内容设置动画的建议方法。 在这里查看有关英国皇家空军的更多信息。
编辑：我应该写“部分解释为”
除了 RAF，您应该尝试使用 setInterval 而不是 setTimeout。另外，为什么每个 setTimeout 的持续时间都有随机因素？如果您不想使用 RAF，我建议在每个间隔更新所有花瓣的同时使用固定间隔的 setInterval（尝试 16 毫秒作为初学者）。目前，您为每个花瓣使用单独的 setTimeout，持续时间随机，这可能会导致很多延迟。
这是一篇关于 RAF 性能优势的优秀 MSDN 文章。它将 RAF 与 setTimeout/setInterval 进行比较。文章中的一些相关引述：
因此，应用程序与浏览器绘制间隔完美对齐，并且仅使用适当数量的资源。
还：
无法绘制每第三次绘制，因为在显示刷新间隔之前发生了另一个绘制请求。这种过度绘制会导致动画不连贯，因为每三帧都会丢失一次。这种定时器分辨率的降低也会对电池寿命产生高达 25% 的负面影响。
使用 setTimeout 可能无法完全解释示例中的性能差异。其他人指出，这种比较不是苹果对苹果。您应该能够使用 setTimeout 获得更快的动画（我已经使用 setTimeout 编写了一个相当流畅的物理模拟）。无论如何，RAF 比 setTimeout 优越得多，并且是获得最流畅动画的唯一方法。
jQuery 和 HTML5 动画性能非常好，因为每种方式都使用不同的方式来移动/绘制对象。
当您使用 jQuery 制作动画时，它会直接访问对象并在屏幕上转换它们，而当 Canvas 元素每次使用新位置的元素时，它都必须重新绘制画布。
PS我有这个说法的来源，但这实际上是我的观点。