javascript - Android WebView: Very laggy button response - Stack Overflow

admin管理员组

文章数量:1193565

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?

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?

• javascript
• android
• html
• web-applications

Share Improve this question Follow asked Sep 11, 2011 at 0:34 NathanNathan 7,0321212 gold badges4040 silver badges5656 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 18

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

try insert to the html code

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no">

and quick click click click click is no longer a problem (for me. 4.2.2 and WebChromeClient)

So, WebView holds each tap event to see if it's a double tap or a touch move event. There is an alternative to binding to touchstart events. If you specify with the viewport meta directive that your WebView shouldn't zoom or scroll, touch events will reach your code immediately (since Gingerbread).

You can find the details on the viewport directive here: http://developer.android.com/guide/webapps/targeting.html

As the Google code is very complicated, I implemented my own using Mootools 1.3+:

Element.Events.touch = 
{
    base: 'touchend',
    condition: function(e) 
    {
        return  ((new Date().getTime() - this.startT < 200) && this.valid) ? true : false;
    },
    onAdd: function(fn) 
    {
        this.addEvent('touchstart', function(e)
        {
            this.valid = true;
            this.startT = new Date().getTime();
            this.startX = e.touches[0].clientX;
            this.startY = e.touches[0].clientY;
        });
        this.addEvent('touchmove', function(e)
        {
            if ((Math.abs(e.touches[0].clientX - this.startX) > 10) || (Math.abs(e.touches[0].clientY - this.startY) > 10)) this.valid = false;
        });
    }
};

Just put this code on your page and now use touch event instead of click:

$('id').addEvent('touch', function()
{
    // your code
});

It works by adding a touchend and touchstart event, if they happen in less than 200ms and the touch doesn't get too far it's a valid touch otherwise not.

It worked very well on 2.2 and 4.0

本文标签： javascriptAndroid WebView Very laggy button responseStack Overflow