PhoneGap 1.4 包装 Sencha Touch 2.X - 性能如何？答案

【问题标题】：PhoneGap 1.4 wrapping Sencha Touch 2.X - What about performance?PhoneGap 1.4 包装 Sencha Touch 2.X - 性能如何？
【发布时间】：2012-04-22 13:25:57
【问题描述】：

我正在构建一个多平台平板电脑应用程序，使用 Phonegap 1.4 包装它，只使用它的 web 视图，然后我使用 Sencha Touch 2 框架来发挥我的魔力。多平台是指 iOS 5.X+ 和 Android 3.0+（目前）。

到目前为止，这个应用程序运行良好，它的所有功能都可以在两个系统上运行，但是......在 Android 平板电脑（三星 GalaxyTab）上它真的很慢。发生了什么？我可以对此做些什么吗，或者它只是 android 的限制？

谢谢

里卡多·佩尔：http://edgecodetechology.blogspot.pt/

****EDIT****（我试图让这篇文章对煎茶社区有所帮助）

Sencha Touch 与许多其他 Javascript 框架一样，由于 javascript 本身的原因，并不是性能的最佳示例。

那为什么要使用煎茶触摸？

就我而言：多平台（iOS、Android、Windows Phone、Blackberry、Windows、Mac OSX、Linux。共享 80-90% 的代码）李>

`Mitigating performance issues due to lack of visual pre-process in Android systems:`

CSS3重视觉流程：
- 避免渐变
- 避免阴影
- 避免变换和动画
良好的 MVC 实践：
- 不要使用更多的观看次数，而是实际展示
- 尽可能进行预渲染/预数据提取，以避免同时进行渲染和数据处理
对于任何滚动视图，应在 Android 上禁用过度滚动。我已经在 Android 设备上测试了许多 Sencha Touch 2 应用程序，并且由于延迟和滞后，过度滚动会导致非常不愉快的体验。（在 Galaxy Tab、Nexus S 和一些 HTC 上测试）由 Thiem Nguyen （我一直在挖掘你的帖子，对不起伙计：P）

【问题讨论】：

如果你愿意，我想多提意见：D
我真的想让这个线程对 stackoverflow 的其他用户感兴趣，但似乎情况并非如此。或者也许没有其他人能够提出建议。感谢@Thiem Nguyen 和 camus。
不客气 :) Sencha Touch 2 对于开发人员来说确实是新的，即使像我这样已经使用过第一个版本（Sencha Touch 1）的开发人员，所以我认为它需要时间变得更受欢迎。
@Ricardo：一年后，PhoneGap 从 1.4 版升级到 2.6 版，Sencha Touch 从 2.0 版升级到 2.2 版，你觉得有什么不同吗？

标签： android ios performance cordova sencha-touch-2

【解决方案1】：

这里也一样。我在三星 GalaxyTab 上测试了很多 Sencha Touch 2 应用程序，性能真的很糟糕。有一个事实（这可能是实际原因的一部分），iOS 在渲染之前会进行许多预处理和计算，以使用户的外观和感觉看起来更流畅，而 Android 倾向于在旅途中同时渲染和处理。

总的来说，可以说，对于每个基于 Javascript 构建的跨平台移动应用程序，例如 Sencha Touch，iOS 的性能明显优于 Android。但是，Sencha Touch 开发团队正在尽最大努力改进这一点，希望在下一个版本中会更好。您可以查看这篇关于 iOS 和 Android 设备性能比较的文章。

http://www.sencha.com/blog/sencha-touch-2-developer-preview/

PS：虽然这与操作系统的限制密切相关，但您也可以优化您的应用，使其在 Android 设备上表现更好。根据我的经验，最佳做法是：

不要过多使用 CSS3。
尽可能减少 DOM。

希望对你有帮助。

【讨论】：

感谢您的回复。现在我没有自定义任何 CSS，但我最终必须这样做。将 DOM 保持在最低限度是什么意思？使用最少数量的组件？减少 HTML 元素？
是的，有点删除不必要或不活跃的视图。例如，您当前面板上有 3 个列表，当您单击列表 1 中的一个项目时，它会显示列表 2，同样显示列表 3（简单示例是类别 -> 产品 -> 产品详细信息），然后仅当用户点击在列表 1 上，您添加列表 2，与列表 3 类似。此外，当用户点击“返回”时，删除您的列表 3，然后删除列表 2，等等。这样您可以确保仅在 DOM 中保留必要的视图以供显示, 其他人被摧毁:)
CSS3 怎么样？我应该避免渐变等？我可以强制它使用 CSS2 吗？
你可以随时用 CSS2 覆盖 CSS3（例如使用 !important），但它会让你的应用程序更丑，当然……我的意思是你应该永远记住，你的应用看起来越复杂，它就会变得越重。据我所知，CSS3 的一些“重”属性是阴影和转换属性。
感谢您的宝贵时间。为了讨论，我会保留这个问题。

【解决方案2】：

我不是 phoneGap 或 Sencha 开发人员，但我努力跟上有关浏览器性能和发展的问题。

您的应用拥有如此多的抽象层（sencha touch、phonegap、android、webkit、fffuuu），可能很难理解性能问题出在哪里。

就我得到 phonegap 设计而言，它没有嵌入任何 webkit 实现，它所做的（在 android 上）是利用 android.webkit.WebView。我发现很多人抱怨 webview 的性能比 android webkit 浏览器本身糟糕。在这里可能很难改进，因为您使用的是phonegap，并且如果这对您很重要，弄乱android sdk可能会使您失去便携性。

我认为 phonegap 的性能问题不仅取决于硬件，还取决于操作系统的浏览器实现。

如果您想调整性能，那么您可以改进您的 js/css 代码。这可以很简单，就像在 js 中缓存 DOM 节点（DOM 查询很慢），保持 DOM 最小化或者可能更难，因为由于 phonegap 的目标是不同的浏览器引擎实现，您可能需要将代码定位到这些浏览器以便提高性能。

【讨论】：

嗨，Abel，感谢您抽出宝贵时间。这是 android.webkit.WebView 的一个很好的点！我正在使用 PhoneGap 1.4，我还没有升级到 Cordova，我不确定我是否应该..我可能需要更深入地调查它们之间的差异。
另外，我同意这里的主要性能问题是由于抽象层的数量。但这是我们在移动 html5 应用程序中无法避免的问题，至少目前是这样。煎茶在这件事上有所改善，但谁知道呢？如果我选择放弃 ST2，我会遇到更多问题而不是解决方案，我可以使用 jQuery Mobile / jQuery Touch，但与 ST2 相比，这是一个非常慢的框架。还有……我别无选择！ :D 剩下的是：在 Cordova 之上进行硬编码，并将生产时间乘以 10。

【解决方案3】：

我不太确定这个问题是否与操作系统直接相关，就像应用在 Android、iOS 等设备上运行一样。

如果您在中低性能硬件设备（如 Samsumg Galaxy）上测试 Sencha Touch 2 Kitchen Sink 示例，您将遇到性能低下的问题。

但是，如果您转向更好的硬件设备，例如 HTC Desire 2（更接近 iPhone 4S），您会发现性能会变得更好。

与 iOS 相比，我认为 Android 对 Sencha Touch 2 的性能没有限制。我只是认为有些设备比其他设备更好（iOS 总是在高性能设备 iPhone/iPad 上运行）。

对于我们的不幸，人们倾向于拥有价格较低且硬件功能强大的产品。

【讨论】：

感谢您的意见！我有点不同意某些观点。对于我的应用程序，我有一个 GalaxyTab 和 iPad2 用于测试和调试：GalaxyTab 不是 iPad 的“低级机器”，它不是！去检查两个产品的硬件。性能差异是巨大的，不应该如此！

【解决方案4】：

我有几个关于基于 SenchaTouch 的应用程序性能的基本问题。请参阅 LinkedLN 团队的这篇文章，了解他们如何通过手动编码 DOM 操作来提高 HTML5 应用程序的性能：-

http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

在本文的上下文中，我看到了 Sencha Touch 的两个问题：-

Sencha Touch 通过将 javascript 对象转换为 Dom 节点并将它们添加到 Dom 树中来构建其 UI。 Chrome 工具将显示它最终会在 Dom 树中添加相对较多的 DIV 和其他 DOM 元素。这不会对性能产生不利影响。
Sencha UI 中的大多数 Dom 节点是由 Sencha API 代码生成的，而不是由标记生成的。如果我们写代码直接操作这些Dom元素，能保证不会产生任何副作用吗？

【讨论】：