HTML + JS与HTML5性能

Question

我最近在使用HTML5进行了一些实验，并注意到HTML5在移动设备，平板电脑甚至桌面设备上运行得非常糟糕。我进行了以下测试：

使用jQuery在页面上移动150个元素 http://erality.com/public/html5/001/

使用HTML5在页面上移动25个元素 http://erality.com/public/html5/002/

jQuery版本在桌面上运行良好，在较新的平板电脑上运行良好。 HTML5版本（具有1/6元素）在桌面上运行不佳，在平板电脑上很糟糕。这是正常的表现吗？我做错了吗？

任何见解都会有所帮助。

Answer 1

“HTML5”版本的糟糕表现是通过使用setTimeout代替requestAnimationFrame（RAF）来解释的，这是使用HTML5画布动画任何内容的建议方法。 Look here了解有关RAF的更多信息。

编辑：我应该写“部分解释为”

除了RAF，你应该尝试使用setInterval而不是setTimeout。另外，为什么每个setTimeout的持续时间都有一个随机因素？如果您不想使用RAF，我建议使用具有固定间隔的setInterval（尝试16ms作为初学者），同时更新每个间隔的所有花瓣。目前你正在为每个花瓣使用一个单独的setTimeout，具有随机持续时间，这可能会导致很多延迟。

Here是关于RAF性能优势的MSDN文章。它将RAF与setTimeout / setInterval进行比较。文章中的一些相关引用：

  

因此，应用程序与浏览器绘制间隔完全一致，并且只使用适当数量的资源。

此外：

  

由于在显示刷新间隔之前发生了另一个绘图请求，因此无法绘制每三个绘图。这种透支会导致动画不稳定，因为每三帧都会丢失。此计时器分辨率降低也会对电池寿命产生负面影响，最高可降低25％。

使用setTimeout可能不会将完全帐户视为示例中的性能差异。其他人已经注意到，这种比较不是一蹴而就的。你应该能够用setTimeout获得更快的动画（我用setTimeout编写了一个相当流畅的物理模拟器）。无论如何，RAF优于setTimeout，并且是获得最流畅动画的唯一方法。

Answer 2

jQuery和HTML5动画的表现非常出色，因为每种方式都使用不同的方式来移动/绘制对象。

当你做动画是jQuery时，它直接访问对象并将它们翻译在屏幕上，当Canvas元素每次都必须重新绘制画布时，元素处于新位置。

P.S。我有这个说法的来源，但这实际上是我的观点。