8

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?

Nathan
  • 6,772
  • 11
  • 38
  • 55

4 Answers4

17

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

Boris Smus
  • 8,220
  • 2
  • 36
  • 33
4

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)

wojtura
  • 39
  • 1
  • 2
  • 1
    That viewport meta tag is holly grail! Forget fast-click and all that crap. This is what you want to use. The delay is because webview is waiting to detect double-tap zoom, but once you don't want to zoom, there is no need to detect the double-tap :) – Josef Kufner Oct 09 '14 at 22:47
  • 1
    ... and X-UA-Compatible is completely useless since nobody has IE on Android phone/tablet. – Josef Kufner Oct 09 '14 at 22:49
3

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

Albertas Agejevas
  • 723
  • 5
  • 6
  • 3
    "touch events will reach your code immediately (since Gingerbread)." I cannot find any evidence to support this claim. Also, it doesn't seem to be working on my Gingerbread device. – marcovtwout Apr 24 '12 at 14:07
0

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

Ali
  • 21,572
  • 15
  • 83
  • 95