In my app, I want to include a webview containing for example a simple HTML 5 game. On a new phone with Android 5.0, this works great, but on an older phone, running Android 4.4.2, the performance is terrible. In the chrome browser, the game is performing perfectly, but in the webview of my app, it is very slow and laggy.
I have tried some performance optimizations like enabling hardware acceleration, but nothing resulted in a better performance. Therefore, I looked for alternatives to the webview, and using Crosswalk resulted in a very good performance. But now, the problem is that Crosswalk adds 18MB to the apk size and 45MB to the phone memory usage. As that is simply too much for just a simple app like mine, Crosswalk unfortunately turned out to be no option.
Is there a way that improves webview performance, but does not increase the memory usage as drastically as Crosswalk does?
The core problem that you will face with using the stock WebView built into Android is that it is terribly inconsistent in terms of performance and what it supports regarding HTML5/CSS. While CrossWalk may add 18MB to the size of your app, it is worth it if your concern is performance and compatibility across devices and Android variants.
Your other alternative is CocoonJS, however without knowing more about your app, it's hard to say if this will benefit you or not.
https://www.ludei.com/cocoonjs/
Related
I currently develop an hybrid app based on Cordova. My main target is Android devices with at least 2.3 support.
I face performance issues, particularly scrolling which is not really smooth and more generally navigation inside app. So I implemented several tips to increase my app speed such as:
Hardware acceleration
Use the fastest scroller I found (FTScroller)
Use hogan.js for view rendering with pre-compiled template
I tried Famousjs and CocoonJS but it didn't help. I look to crosswalk-cordova, but it increase the size of the app by 15-20mb and I have to keep the size as light as possible.
The app performs pretty good on powerful devices such as my Nexus 5, but it become slow on older/less powerful devices.
So what other tips could I use to increase the speed of my app ?
Many thanks.
"but it become slow on older/less powerful devices", does this issue happens when you are using crosswalk?
I guess on older/less powerful devices, if the performance drops dramatically, it maybe related the the GPU blacklist, Which means on some old devices GPU are blacklisted. To resolve this issue, you can pass '--ignore-gpu-blaclist' option,
see: https://crosswalk-project.org/#wiki/Use-Chromium-command-lines-in-your-apps-on-Android
I've developed a mobile application with rhomobile + jQuery Mobile.
When I deploy it on a mobile phone "for android", it is very slow.
Could you help me to find the reason?
You can deactivate transition in your Rhodes app very easily to give it a try.
In the layout.erb file inside the app folder of your Rhodes application, you can find:
// Uncomment these options in case of performance problem in pages transition
//$.mobile.defaultPageTransition = 'none';
//$.mobile.defaultDialogTransition = 'none';
//$.mobile.ajaxEnabled = false;
//$.mobile.pushStateEnabled = false;
//$.mobile.loadingMessageDelay = 50; // in ms
Just uncomment it and give it a try.
No matter what wrapper is used (Rhomobile/Phonegap) jQuery mobile will have extremely bad performances on android devices (mainly 2.X, but sam thing relates to 4+ versions).
On the devices that have this problem (mostly Android) there isn't anything you can do. It is a browser limitation. Android mobile browsers are notorious for poor transitions.
On iOS, you have to be aware of a couple of issues. First of all, Webviews are hampered by slower Javascript than Mobile Safari, because they lack the Just-in-time compile feature. It's not Rhodes-specific. The same Javascript will run slower in a Webview than it will in Mobile Safari itself, and there is no getting around it.
Secondly, iOS does not automatically use hardware acceleration for transitions. You can "hint" the browser to use hardware acceleration by using a null 3D transform, like translateZ(0). Search for more information on this. There is a bit of an art to picking the right elements to do this on, since it can be costly to apply this to a large number of elements, and it usually isn't necessary to apply it to the entire element heirarchy.
My best advice, though, is to not use transitions, because they aren't handled well yet on a wide variety of mobile devices. IMO, no transition is a vastly superior user experience anyway. Transitions are used mainly to distract the user from slow software, ironically introducing more delay in the process.
I developed an application for android using jquery mobile and phonegap.
I deployed the app to my device over usb. The performance of the app ist really bad, especially while scrolling a longer list.
The strange thing is: The whole app runs smooth if i just open up the browser on my phone and access the index.html directly. Same technology, same content. I do not use the phonegap native api or anything similar.
Tested with phonegap 1.5.0 and 1.7.0rc1, jquery mobile 1.1.0 on android 4.0.2.
Any ideas?
On honeycomb (3.0), Ice cream (4.0) and posterior devices, you can boost performance by adding the following in the < Application ... > tag:
android:hardwareAccelerated="true"
You could set the minSdk to 8 (Android 2.2) for compatibility and the targetSdk to 15 (Android 4.0) and that would make hardware acceleration work when its available on the device only.
I believe that with this flag the performance of my apps is equal to running them in the browser, so I guess its because the browser was coded with hardware acceleration :)
I had a similar problem: a page with a longer list of "medium complex" themed divs. The browser of HTC phone had no problems in displaying. But within the phonegap app rendering failed completely. I saw a kind of WSOD, which disappeared only after touching the display. After touching, the page was displayed correct.
The problem was not in place, when I shortened the div-list to one or two div-elements or when I reduced the sub elements within the divs and reduced the render effort caused by the css complexity.
The white screen looked like, if the whole body was invisible, since only the documents background-color was displayed (I added a light pink for this). So I guess, the rendering was the problem after reading this thread
I tried the various proposals I found in this thread to make the app work without the "WSOD". But nothing worked. Some of them made the app displaying really worse.
Finally, after a whole day of searching, I made it. I set within the tag (not the tag) of my AndroidManifest
<application android:hardwareAccelerated="false" ...
Now the app behaves in the same fast way as my webbrowser. Seems like, if hardware acceleration is not always the best feature...
My versions:
phonegap 3.5.0, Android 4.0.3, jQuery v2.1.0, HTC Sense 3.6
Found an answer here: http://groups.google.com/group/phonegap/browse_thread/thread/94da1cf881abe995/6d4f7aea7aeba523?lnk=gst&q=performance
There is probably a difference between the native browser and the webview in terms of javascript performance.
If you can confirm the browser performs better (that it's not something suboptimal in your code frustrating one but not the other), you could consider deploying as an html5 offline application so that you will actually run in the browser.
We bumped into performance issues while scrolling the same amount of list items with jquery mobile. The performance was so poor (we didn't even try in PhoneGap environment) that we rewrote the app using iScroll library... now the app scrolls really smoothly.
If you are at the beginning of the development, you could try to change the UI library.
After this situation we deploy our apps to test devices quite often to manage performance issues in time... this became a "policy" :)
I'm developing a webbapp for iOS and Android, primarily. The problem is that it tends to run slow on the android phone (testing made on Samsung Galaxy S2). I've tried a couple of different frameworks together with PhoneGap without any good result.
My experience this far (on android):
Dojo toolkit: (v1.7.1)
Pretty good but flickers alot when doing transitions between different views and the input forms performs badly.
Sencha Touch: (v1.1)
Not very responsive and flickers a bit during transitions. Changing orientation takes awfully long.
JQTouch: (beta 4)
Runs smooth but the layout is broken on android (back-buttons etc that uses CSS transform rotate and translate)
My question is:
Have any of you found a framework that works well on both iPhone and Android devices? or is the only solution to develop native?
On a side note I've noticed that Sencha touch 2.0 has focused on Android performance but there's only a developer preview available at this time and is not going to be release before Q2 2012.
What I have found is that many of the frameworks work just great but the root cause of the problems is earlier versions of Android's support for CSS3 style transitions. You are probably better off avoiding or disabling these transitions.
After I have compiled and deployed the demo application to my Samsung Galaxy S II I noticed that the Sample PhoneGap App which comes with PhoneGap was not very responsive when pressing buttons and scrolling.
I also made a little app using PhoneGap and jQuery Mobile, with 4 buttons everything was ok, but when I added more than 7 and my viewport needed to be scrolled, scrolling become to be very slow, the more buttons/widgets I had the slower the srolling was.
Is this a bug specific to my mobile device or it is just how PhoneGap works:
The fact that PhoneGap apps feel slow on my phone including the demo?
EDIT:
The same PhoneGap app served by an HTTP server from my laptop and launched in the standard Android browser works very smoothly
Try setting your targetSdkVersion higher. Changing mine from "8" (i.e. Android 2.2) to "14" (Android 4.0) dramatically improved PhoneGap performance on phones running newer versions of Android. Most likely this enables certain performance-enhancing features such as hardware graphics acceleration.
For more info see my other answer about this here: https://stackoverflow.com/a/12397768/233370
Since PhoneGap and the frameworks that is used with it (JQM,Sencha Touch etc) are just working in a WebKit browser they can be slow if there's too much to render.
There's actually no bug with your device or etc.It's just that PhoneGap and the frameworks are not so good if you want fast response and so on.You can try your app in other devices and can observe that they behave the same.
I had the same Problems, after Update to Android 4.0.4 my Phonegap (Cordova 2.0.0) & Sencha Touch 2 - APP was very very slow.
But after I insert
super.appView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
the APP works fine, as before the update.
http://developer.android.com/guide/topics/graphics/hardware-accel.html
For improved performance you may not need Phonegap.
If what you need is quick cross platform styling but fast native components try a tool like nativecss.com It keeps the styling in CSS, but uses native components for everything else - so no HTML rendering delays or clunky animations.