Sencha Touch 2 - Android Performance

Question

We are developing a Sencha Touch 2 application which makes use of Phonegap to be able to install it as an application and access the storage of a device. This works really well on the iPad 2 and the iPad 3. However when we tried to run the application on an android device, the performance was very slow. The main elements which slowed down the system were lists and carousels. When we tried to test the same application through the chrome browser, the performance was on-par with that of the iPad.

Do you have any suggestions on what we can do to improve the performance on android, maybe even ditching Phonegap for something which works better. Or if we can force phonegap to run as a chrome browser.

Thank you for your time & help.

Answer 1

The problem you have here is that the Android browser does not use graphics hardware acceleration. This means that the standard tricks that Sencha (and other HTML5 libraries such as jQueryMobile, iScroll etc...) use to provide good scrolling performance, such as CSS 3D transforms to cause a your list to be rendered in a separate layer, which can then be translated in hardware, will not work on Android. Instead, list scroll will be performed entirely in software, which is going to be slow!

The Chrome browser, does however provide GPU acceleration. The Android device is more than capable of delivering a good HTML5 experience, it is simply that the standard browser does not take advantage of GPU hardware yet.

Unless you can force your end users to use Chrome (which I doubt), the only option is to degrade user experience, and deliver a slightly simpler UI for Android users.

For further details, see "IMPROVING THE PERFORMANCE OF YOUR HTML5 APP"

Answer 2

尝试在AndroidManifest.xml中设置此标志：android：hardwareAccelerated =“true”

Answer 3

Update: Having now worked with ST2 more longer now the performance challenges on Android are just something you have to accept. There are many things you can do to avoid performance issues such as reduce listeners and events, keep your DOM light (below 2000 nodes) and generally avoid any CSS3 transformations and effects (these in particular don't perform well on Android)

Another thing to consider is rather than using the built in WebView you could use the CrossWalk browser and embed this in APK.

https://crosswalk-project.org

It adds a little size to your APK (15-20MB), but it performs better than the built in WebView and brings stability and consistency to a very fragmented platform. Consider the reality that every WebView on Android depending on device, vendor and OS version may be different in small ways. CrossWalk will allow you to have the exact same version across all Android 4.0+ devices and remove any device or vendor specific issues.

There is no silver bullet for performance on Android. Graphics acceleration won't improve the perform of pure javascript execution or DOM manipulation. If you want to understand why, then start here:

What's the difference between reflow and repaint?

Older Answer (may still be valid):

For ICS and above the following setting on the webview will significantly improve rendering performance for Sencha Touch on Android:

mWebView.setLayerType(WebView.LAYER_TYPE_HARDWARE, null);

However in my experience this will introduce artifacts into CSS rendering depending on the device and platform variation. I haven't specifically found a reason for this and I don't expect Google will resolve it as the webview component will be getting replaced with a newer and better version in Android 4.4.

https://developers.google.com/chrome/mobile/docs/webview/overview