PhoneGap 1.4包装Sencha Touch 2。X -性能如何?

I'm building a multiplatform tablet app wrapping it with Phonegap 1.4 using just its webview, then I work my magic with the Sencha Touch 2 framework. By multiplatform I mean iOS 5.X+ and Android 3.0+ (for now).

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

This app is working great so far, all its features work on both systems but... On the Android tablet (Samsung GalaxyTab) its really slow. What's happening? Can I do something about it, or its just android's limit?

这个应用目前运行良好，它的所有功能都在两个系统上运行，但是…在安卓平板电脑(三星GalaxyTab)上，它的速度非常慢。发生什么事情了?我能做点什么吗，或者只是android的限制?

Thanks

谢谢

Ricardo Perre: http://edgecodetechology.blogspot.pt/

里卡多Perre:http://edgecodetechology.blogspot.pt/

****EDIT**** (I'm trying to make this post somewhat useful to sencha community)

**** ***编辑**** *(我想让这篇文章对sencha社区有点用处)

Sencha Touch, like many other Javascript Frameworks are not the best example of performance due to javascript itself.

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

Then Why use Sencha Touch?

那么为什么要使用Sencha Touch呢?

In my case: Multiplatform (iOS, Android, Windows Phone, Blackberry, Windows, Mac OSX, Linux. Sharing 80-90% of the code)

以我为例:多平台(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 heavy visual process:

CSS3沉重的视觉流程:
- Avoid Gradients
- 避免梯度
- Avoid Shadows
- 避免阴影
- Avoid Transformations and animations
- 避免转换和动画
Good MVC practices:

良好的MVC实践:
- Don't use more views and you actually showing
- 不要使用更多的视图
- Pre-render / Pre-datafetch when possible to avoid render and data process simultaneously
- 尽可能避免渲染和数据处理同时进行
For any scrollviews, overscroll should be disabled on Android. I've tested many Sencha Touch 2 applications on Android devices and overscroll causes badly unpleasant experience because of delays and lags. (tested on Galaxy Tab, Nexus S, and some HTCs) by Thiem Nguyen (I've been mining your posts, sorry dude :P)

对于任何滚动视图，应该在Android上禁用滚动。我已经在Android设备上测试了很多Sencha Touch 2应用程序，由于延迟和延迟，过度滚动会导致非常不愉快的体验。(我一直在挖掘你的帖子，抱歉，伙计:P)

4 个解决方案

#1

Same here. I've tested many of my Sencha Touch 2 applications on Samsung GalaxyTab and the performance is really terrible. There's a fact (which maybe a part of actual reason) that, iOS does many pre-process and calculation before rendering to make it seems smoother to user's look and feel, while Android tends to render & process simultaneously on the go.

我也一样。我已经在三星GalaxyTab上测试了我的Sencha Touch 2应用，它的性能非常糟糕。有一个事实(这可能是真实原因的一部分)，iOS在渲染前做了很多预处理和计算，让用户感觉起来更流畅，而Android则倾向于同时渲染和处理。

In general, it could be say that, to every cross-platform mobile apps built on Javascript, like Sencha Touch, iOS performance is significantly better than Android. However, Sencha Touch dev team is trying their best to improve this, hopefully it would be better in next releases. You could see this article about iOS & Android devices performance comparison.

总的来说，可以说，对于每一个构建在Javascript上的跨平台移动应用，比如Sencha Touch, iOS的性能都明显优于Android。然而，Sencha Touch dev团队正在尽最大努力改善这一状况，希望在下一个版本中会更好。您可以看到这篇关于iOS和Android设备性能比较的文章。

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

PS: While it's much relevant to the OS's limit, you can also optimize your app to make it perform better on Android devices. To my experience, the best practice is:

PS:虽然这与操作系统的限制有很大关系，但你也可以优化你的应用程序，让它在Android设备上表现得更好。根据我的经验，最好的做法是:

Do NOT use CSS3 too much.
不要过多使用CSS3。
Keep your DOM as minimal as possible.
尽可能地减少DOM的使用。

Hope it helps.

希望它可以帮助。

#2

I´m not a phoneGap or Sencha developer whatsoever, but i try to keep up with what concerns browsers performance and evolution.

我不是phoneGap或´Sencha开发人员,但我试图跟上关心浏览器性能和演化。

You got so many abstraction layers (sencha touch, phonegap, android, webkit, fffuuu) for your app that it may be very hard to understand where performance issues are.

你的应用有很多抽象层(sencha touch, phonegap, android, webkit, fffuuu)，所以很难理解性能问题在哪里。

As far as i get phonegap design, it does not embed any webkit implementation, what it does (on android) is to make use of android.webkit.WebView. I found many people complain about how webview got a terrible performance over android webkit browser itself. it may be hard to improve here, since you are using phonegap, and messing up with android sdk may make you loss portability, if thats important to you.

就我的phonegap设计而言，它不嵌入任何webkit实现，它(在android上)所做的就是使用android.webkit. webview。我发现很多人都在抱怨webview在android webkit浏览器上的糟糕表现。在这里可能很难改进，因为您正在使用phonegap，如果这对您很重要，那么与android sdk搞混可能会使您失去可移植性。

What i see as a performance problem on phonegap is that depends not only on the hardware, but also on the browser implementation the OS have.

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

If you want to tune performance, then you may make improves in your js/css code. This can be simple as caching DOM nodes in js (DOM queries are slow), keep the DOM minimal or it may be more hard, because since phonegap targets diferent browser engines implementations, you may need to target you code to those browsers in order to improve performance.

如果您想调优性能，那么您可以改进您的js/css代码。这可以很简单，因为在js中缓存DOM节点(DOM查询是慢的)，保持DOM最小化，或者可能更困难，因为phonegap的目标是diferent浏览器引擎实现，所以为了提高性能，您可能需要将代码定位到这些浏览器。

#3

I'm not quite sure if the issue directly relates to the OS, as if the app is running on Android, iOS, etc.

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

If you test the Sencha Touch 2 Kitchen Sink example on a low to medium capability hardware device, like a Samsumg Galaxy, you will experience low performance issues.

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

However, if you move to better hardware devices, such as the HTC Desire 2 (something closer to iPhone 4S), you will see that the performance gets way better.

然而，如果你转向更好的硬件设备，比如HTC Desire 2(更接近iPhone 4S)，你会发现性能变得更好。

I don't think Android has limitations on Sencha Touch 2 concerning performance in comparison to iOS. I just think some devices are better than others (iOS always runs on high level performance devices, the iPhone/iPad).

与iOS相比，我不认为Android在Sencha Touch 2的性能上有任何限制。我只是认为有些设备比其他设备更好(iOS总是在高性能设备上运行，比如iPhone/iPad)。

And for our misery, people tend to own lower price and hardware capable ones.

让我们痛苦的是，人们倾向于拥有更低的价格和更便宜的硬件。

#4

I have a few fundamental questions about the performance of SenchaTouch based apps. Please refer to this article by LinkedLN team on how they improved the performance of their HTML5 app by hand coding DOM Manipulations :-

我有一些关于基于SenchaTouch的应用程序性能的基本问题。请参考LinkedLN team这篇文章，关于他们如何通过手工编码DOM操作改进HTML5应用的性能:-

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

In the context of this article I see two issues with Sencha Touch :-

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

Sencha Touch builds its UI by converting javascript objects into Dom Nodes and adding them into the Dom Tree. Chrome Tools will show that it ends up adding a relatively high number of DIVs and other DOM elements to the Dom tree. Wouldnt this have a detrimental effect on the performance.

Sencha Touch通过将javascript对象转换为Dom节点并将其添加到Dom树中来构建它的UI。Chrome工具将显示它最终会在DOM树中添加大量的div和其他DOM元素。这难道不会对性能产生不利影响吗?
Most of the Dom nodes in the Sencha UI are generated by Sencha API code and not from markup. If we write code to directly manipulate these Dom elements, can we be sure that it will not produce any side effects ?

Sencha UI中的大多数Dom节点是由Sencha API代码生成的，而不是通过标记生成的。如果我们编写代码来直接操作这些Dom元素，我们能确定它不会产生任何副作用吗?

#1