For some reason the WebView I am using is quite slow, I don't have to much of a problem with the loading times for web pages, although if there is a way to improve that I would appreciate it. But my main concern is the jagged laggy scrolling. I'm reasonably sure there must be a way to get it working more smoothly, as other apps using (I assume) the WebView don't have this problem. I suppose it may be possible that these other apps are using some private web client although it seems to me very unlikely that all of them would. Others have asked similar questions on SO, but none of the answers are particularly effective.
i think you have this code in your manifests
android:hardwareAccelerated="false"
android:largeHeap="true"
you have to delete if you have it.
webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
This work for me.
It's really hard to guess what your problem might be given the amount of information you have provided:
Did you declare that you want software rendering in your application's manifest (or by
setting the WebView's layer type)? Maybe try hardware mode.
What is the page that you're trying to load? Maybe there's tons of CSS/JavaScript going on there? Does a simpler page scroll well?
Which version of Android are you seeing this on, have you tried others? Maybe this is specific to a device?
Is the scroll not smooth (are you not hitting 60fps) or is there a large lag between the finger moving an the page moving? If it's the latter - maybe you have touch handlers slowing things down.
The above is just stuff from the top of my head. There are great articles out there on the topic, such as this one. Also, if you're using the Chromium WebView you can use the profiling tools via remote debugging
Related
Is there a workaround? I am running my own custom scrollbar script as opposed to using the built in browsers functionality. I prefer to use SVG for my image elements for a number of reasons, but one, pretty major pitfall is the fact that touching or mousewheeling over an svg blocks the event and thus brings the page scrolling to a halt. This is even more noticeable on mobile browsers where the svg might take up the entire width of the document in which case as soon as you get to an SVG element, the user is unable to scroll past it.
I haven't tested in IE, but in Chrome, the touch commands dont work on top of SVG, and on Firefox, the mousewheel events are a problem. I assume it will be both on IE haha.
A decent solution would be to somehow add an event to my SVG elements the catches the events and passes them onto the scrolling events. I can't seem to find a way. An even better solution would be to somehow place the document above the SVG so the SVG doesn't interfere with the scrolling at all. Again, can't seem to find a way.
I embed my SVG elements with object tags, which is important for a variety of reasons. I'm assuming the object tag is actually the culprit.
Per Duopixel's comment. Adding:
object {
pointer-events: none;
}
To the css does solve the problem in both Firefox and Chrome. I still have to test in IE, but for now this seems the best and easiest solution.
A good article that explains the pointer events attribute can be found at http://davidwalsh.name/pointer-events
If the issues mentioned above are an issue in IE, you can use a javascript solution that requires capturing the position of the pointer and passing it to the proper element. A working version that uses jQuery but could very easily be translated into vanilla javascript can be found here: http://jsbin.com/uhuto/1/edit
I am making an app for Android using phonegap and jquery mobile. When I use phonegap build and try it on my Galaxy S3 it is very slow and clicks take over a second for anything to happen. I already tried setting the Android SDK version to 14 but that didn't do anything. This is going to be an app that is going to take massive amounts of data from a large server with 50 items being loaded at one time. I heave read around that Phonegap isn't very good for large scale things like this so is there any way to optimize Phonegap for this? or do I just need to just use something else, and if so what is the best thing to use?
For the click issue, checkout fastclick.js (https://github.com/ftlabs/fastclick)
Most mobile webviews have a 300ms click delay to wait for a double click for zooming in on content. Fastclick.js allows you to bypass this.
Additionally for overall performance issues, you should be mindful of the amount of javascript libraries used. I have made a number of application with phonegap that rely heavily on large amounts of external data and found that trimming down on libraries and using my own JS optimized for my exact purposes has worked best.
I use handlebars.js for templating / view display and always use for loops instead of jquery each. There have been studies that show for being up to 1000x faster than each when loading large sets of data. This is because each recursively finds each instance where as for simply iterates through a set of data.
i know this is a bit late but this answer will be for people who are still facing this issue, i faced the same issue a week ago, and ended up finding that the issue wasn't because of:
hardware acceleration
SDK version
nor the phone hardware specs
which might be the reason sometimes for certain cases, but if u're using jquery,
then its peopably because when the android application use the Webview, it doesnt handle the JQuery animation very well, which will result a big performance issue, so what you should do is to replace the JQuery animation with CSS3 animation,
to help more, if you're using the jquery animate() function to do animation, then you can just add the JQuery.transit library after normal JQuery library, and use the [transit] function instead of the [animate] function. no need to modify parameters, just replace the function name and thats all.
you can find the library in this link:
jquery.transit
after using the library you'll notice a huge performance jump, and everything will work smoothly after that.
I've been looking for the best way to setup/choose my mobile development libraries. It's been giving me an headache of all the options there are.
I've tried UXI, Zepto, JQMobile, Sencha, and a couple more.
What i'm looking for is a highly cross device supported lightweight library. I only want to use it for eventHandling focussed on mobile events like swipe. And i'd love to use some page transitions.
Can anyone talk some sense in me?
Would you mind going over whats wrong with Zepto and JQM?
Zepto is extremely lightweight and deals with animations beautifully. Unfortunately the documentation isn't so great so figuring it out is a bit tricky. I'd go with this if you have the patience to learn it.
JQM is less lightweight but has great documentation and a lot of people able to help you here on stackoverflow. Its perfect for your eventHandling and transitions.
Sencha has very nice features but oh my god is it ever different than anything I've ever used. if you can figure it out, you can make some beautiful apps but I would stray away from this due to how heavyweight it is vs what you want to do.
Here is something that will help you with really speedy touch events / event handling though.
Facebook has the most smooth UI in my Android Phone, and I am wondering how can they do that.
While I am writing my demo, ListView with images always seems to be laggy, while facebook's new feed activity behaviors so amazing.
Anyone can tell me whether the Facebook App uses native ListView but with some improvement, or just rewrite the whole view for better performance?
EDIT: I have already used the caching strategy such as using async threads, caching ViewHolder as tag and storing images in memory for acceleration, while I still feel laggy. I do really want to know how did facebook engineers do that, they are really brilliant
Try hooking the device up to adb, open DDMS and press the method profiling button, then start scrolling a bunch for a few seconds. Traceview will open and you see what is using up all the CPU time.
I've never used a ListView before, but if I had to guess maybe they are retrieving the results and then caching them, whereas you're querying for the results everytime and not caching them.
I have a Gallery. This Gallery has a lot going on in it and it is slowing down the scrolling effect substantially. Does anyone have any idea as to how to optimize something like this?
The essence of my question is this: How can I make layouts that zip substantially faster than their standard android implementations. Renderscript? NDK? Flash layouts?
Keep in mind I am already caching my views. I know this is a very general question so any and all input is appreciated.
Thanks.
Quite often a sluggish UI is the result of doing a lot of work on the UI thread. I suppose you could double check whether this is the case and consider abstracting non-UI related logic into one or more different theads. E.g. you probably want to avoid fetching large amounts of resources from the SD card or a database on the UI thread. Doing such actions in seperate thread might improve responsiveness, although results will obviously depend on the particulars of your app.
Okay here is what I found from watching just the first several minutes of this video:
http://www.youtube.com/watch?v=v9S5EO7CLjo
I am building my app on 3.1. In the application tag of the Manifest, add the following as an attribute: android:hardwareAccelerated="true". The difference in UI performance is amazing. Thumbs up to Google for this addition to the Android SDK.