Question

I’ve got a little web app that I made to play with Android’s WebView functionality.

I’ve got some divs that I use as buttons (with onclick attributes). Upon trying out the app (in the device’s browser), I immediately noticed a huge amount of lag after tapping a button. The lag comes between when I tap the button and when the browser shows the orange highlight around it.

I did some testing and got some info:

• JavaScript isn’t the problem. I unlinked all my scripts and blanked out all the onclick attributes. The performance didn’t change.
• CSS3 stuff isn’t the problem. I got rid of all the fancy gradients, and the performance didn’t change.
• The number of elements isn’t the problem. I tried it with just a few elements on the page, and performance didn’t change.
• Doctype and meta stuff isn’t the problem. I made sure I was using what Android recommends.

I’m really at a loss as to why there’s so much lag. I’ve eliminated everything that could be causing it, but nothing’s helped.

Am I missing something?

How can I remove lag after a button is tapped?

Answer 1

Basically, click events on mobile browsers are delayed by 300ms. Do you know of the fast button pattern? Basically you can use the touchstart event (which fires without delay).

Here’s a complete explanation: http://code.google.com/mobile/articles/fast_buttons.html