6

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.

user1520547
  • 63
  • 1
  • 4
  • See. I am also using the phonegap and sencha. But till now i did not face much problem in terms of performance. May be it is little slow for some native features like barcode scanning and all. But not much. I will suggest to use the latest corodova.jar file. May be 1.8 or 1.9 – Arindam Mukherjee Jul 12 '12 at 11:02
  • We are in fact using the Cordova version 1.9 but still the performance is not good. I have to mention that we are not developing it as an MVC application because this was our first project using Sencha so that must be affecting performance aswell. Many people mention that the root of the problem is the Web View of android which Phonegap works on, apparently it is not good for heave sites. – user1520547 Jul 12 '12 at 11:26
  • But i am using MVC architechture. So UI part, i am making using Sencha Touch 2 and native part using phonegap. But till now performance wise it is good. – Arindam Mukherjee Jul 12 '12 at 11:35

3 Answers3

12

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"

ColinE
  • 68,894
  • 15
  • 164
  • 232
  • That explains exactly what the problem is here, thank you. No as you guessed we are not able to force users to use chrome because we need to store more than 5MB of data for the application, and so the localstorage would not be enough. I will take a look at the link you provided, maybe we can sacrifice a bit of visual appeal to improve performance – user1520547 Jul 12 '12 at 11:17
0

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

Delapouite
  • 9,469
  • 5
  • 36
  • 41
  • Already tried this but it does not seem to work, the performance was exactly the same of when the option was set to false. Also tried to set the target sdk to 15 (4.0.3) but still to no avail – user1520547 Jul 12 '12 at 11:16
0

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

Community
  • 1
  • 1
Daniel Maclean
  • 779
  • 10
  • 21