jquery - HTML + JS 与 HTML5 性能对比

Question

我最近对 ​​HTML5 进行了一些实验，发现 HTML5 在移动设备、平板电脑甚至台式机上的运行情况似乎很差。我进行了以下测试:

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

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

jQuery 版本在桌面上运行良好，在较新的平板电脑上也运行得相当好。 HTML5 版本(只有 1/6 的元素)在桌面上运行得很差，在平板电脑上也很糟糕。这是正常表现吗？我做错了什么吗？

任何见解都会有所帮助。

Answer 1

“HTML5”版本的性能不佳是因为它使用了 setTimeout 而不是 requestAnimationFrame (RAF)，这是使用 setTimeout 来对任何内容进行动画处理的建议方法。 HTML5 Canvas 。 Look here了解有关英国皇家空军的更多信息。

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

除了 RAF 之外，您还应该尝试使用 setInterval 而不是 setTimeout。另外，为什么每个 setTimeout 的持续时间有一个随机因素？如果您不想使用 RAF，我建议使用固定间隔的 setInterval(初学者尝试 16 毫秒)，同时在每个间隔更新所有花瓣。目前，您正在为每个花瓣使用单独的 setTimeout，其持续时间是随机的，这可能会导致大量滞后。

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

As a result, applications are perfectly aligned with the browser painting interval and uses only the appropriate amount of resources.

另外:

Every third draw cannot be painted because another draw request occurs before the display refresh interval. This overdrawing results in choppy animations because every third frame is lost. This timer resolution reduction can also negatively impact battery life by up to 25%.

使用 setTimeout 可能无法完全解释示例中的性能差异。其他人指出，这种比较并不是同类比较。您应该能够使用 setTimeout 获得更快的动画(我已经使用 setTimeout 编写了一个相当流畅的物理模拟)。无论如何，RAF 比 setTimeout 优越得多，并且是获得最流畅动画的唯一方法。