Sencha Touch 2 - Android Performance

Question

We are developing a Sencha Touch 2 application that uses Phonegap to install it as an application and access the device’s storage. This works very well on the iPad 2 and iPad 3. However, when we tried to run the application on an Android device, the performance was very slow. The main elements that slowed down the system were lists and carousels. When we tried to test the same application through a Chrome browser, the performance was at the level of iPad performance.

Do you have any suggestions on what we can do to improve Android performance, perhaps even discard Phonegap for what works best. Or, if we can make phonegap work like a Chrome browser.

Thanks for your time and help.

Answer 1

The problem is that the Android browser does not use hardware graphics acceleration. This means that the standard tricks that Sencha (and other HTML5 libraries like jQueryMobile, iScroll, etc.) use to provide good scroll performance, such as CSS 3D transforms, to make your list appear on a separate level. what can then be translated into hardware will not work on Android. Instead, the scroll list will run entirely in software, which will be slow!

The Chrome browser, however, provides GPU acceleration. An Android device is more than capable of providing a good HTML5 experience, just that a standard browser does not yet take advantage of the GPU hardware.

If you can't get your end users to use Chrome (which I doubt), the only option is to degrade the user interface and provide a slightly simpler interface for Android users.

For more, see PERFORMANCE IMPROVEMENT OF YOUR HTML5 APP

Answer 2

Try setting this flag in AndroidManifest.xml: android: hardwareAccelerated = "true"

Answer 3

Update: Now, working with ST2 longer, performance issues on Android is what you need to take. There are many things you can do to avoid performance issues such as reducing listeners and events, preserving your DOM light (below 2000 nodes) and generally avoiding any CSS3 transformations and effects (especially this works poorly on Android)

Another thing worth considering rather than using the built-in WebView, you can use the CrossWalk browser and embed it in the APK.

https://crosswalk-project.org

It adds a small size to your APK (15-20 MB), but it works better than the built-in WebView and provides stability and consistency with a very fragmented platform. Think about how each WebView on Android may differ differently depending on the device version, vendor, and OS. CrossWalk allows you to have the same version on all Android 4.0+ devices and remove any problems with the device or provider.

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

What is the difference between reflow and repaint?

Old answer (may still be valid):

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

mWebView.setLayerType(WebView.LAYER_TYPE_HARDWARE, null); 

However, in my experience, this will lead to artifacts in CSS rendering depending on the change in device and platform. I specifically did not find a reason for this, and I do not expect Google to solve it, since the webview component will be replaced with a newer and better version in Android 4.4.

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