是什么导致移动设备（例如：iPhone）上的 HTML5 Web 应用程序出现延迟？

Question

我正在研究为移动设备（特别是 iPhone）开发 Web 应用程序，但此讨论一般对移动设备开放。我在桌面浏览器和 iPhone 浏览器上尝试一些 HTML5 网站。

一个例子是：www.creativepony.com 如果我理解正确的话，草动画是使用HTML5的canvas标签制作的，然后使用javascript来创建动画。在我的桌面浏览器中，它看起来很好而且非常流畅。然而，当我在 iPhone 4 浏览器（iOS 4.1）中访问该网站时，草动画出现滞后。

我用3G和wifi进行了测试。它们都落后，但 3G 稍差一些。

我的问题是，如果我要开发动画丰富的 HTML5 + JS Web 应用程序，什么会导致滞后？是iPhone CPU本身的问题吗？或者是手机浏览器？或者只是 iPhone 上的互联网连接速度较慢？或者是其他东西？

我这么问是因为 iPhone 4 CPU 似乎足够强大，可以运行一些非常令人印象深刻的游戏。怎么不能显示HTML5+JS的动画呢？如果互联网连接速度较慢，HTML5 的离线缓存功能应该会有所帮助，特别是因为我想让我的网络应用程序具有离线功能。或者，是 iPhone 上的 safari 浏览器吗？或者完全是别的东西。

再次感谢！

Answer 1

Mobile Safari 不太擅长运行 Javascript 动画，因为它由 CPU 供电。即使是最简单的不透明度变换和更改也可能非常缓慢。

然而，CSS-webkit-transition和-webkit-animation规则可以发挥良好的效果，因为它们由 GPU 提供支持：结果可以像原生 iOS 动画一样流畅。