安卓WebView：按钮响应非常卡顿

Question

我有一个小型的Web应用程序，用于测试Android的WebView功能。

我有一些用作按钮的

元素（带有onclick属性）。在试用该应用程序时（在设备的浏览器中），我立即注意到在点击按钮后会出现巨大的延迟。 延迟出现在我点击按钮和浏览器显示其周围橙色高亮之间。

我进行了一些测试，并获得了一些信息：

• JavaScript不是问题。我取消了所有脚本的链接并清空了所有onclick属性。性能没有改变。
• CSS3效果不是问题。我去掉了所有花哨的渐变效果，性能没有改变。
• 元素数量不是问题。我尝试了页面上只有几个元素，性能没有改变。
• 文档类型和meta标签不是问题。我确保使用了Android 建议。

我真的不知道为什么会有这么多延迟。我排除了可能导致它的所有因素，但没有任何帮助。

我有所不知吗？

按钮被点击后如何消除延迟？

- Nathan

Answer 1

基本上，在移动浏览器上，单击事件存在300毫秒的延迟。您是否了解快速按钮模式？基本上，您可以使用touchstart事件（该事件会立即触发）。

这里有一个完整的解释：http://code.google.com/mobile/articles/fast_buttons.html

- Boris Smus

Answer 2

尝试将以下代码插入到HTML代码中：

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

点击操作过快不再是问题（对于我而言，在4.2.2和WebChromeClient上）。

- wojtura

---

那个视口元标记是圣杯！忘掉快速点击和所有那些垃圾。这就是你想要使用的东西。延迟是因为Webview正在等待检测双击缩放，但一旦你不想缩放，就没有必要检测双击 :) - Josef Kufner

...而且X-UA-Compatible在Android手机/平板电脑上没有IE，所以完全是无用的。 - Josef Kufner

Answer 3

因此，WebView会保存每个点击事件以查看它是双击还是触摸移动事件。绑定touchstart事件的替代方法是使用viewport meta指令指定您的WebView不应缩放或滚动，因此自Gingerbread以来，触摸事件将立即到达您的代码。

您可以在此处找到viewport指令的详细信息： http://developer.android.com/guide/webapps/targeting.html

- Albertas Agejevas

---

“自（Gingerbread）版本以来，触摸事件将立即到达您的代码。”我找不到支持这一说法的证据。此外，在我的Gingerbread设备上似乎无法工作。 - marcovtwout

Answer 4

由于Google代码非常复杂，我使用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;
        });
    }
};

只需将此代码放在您的页面上，现在使用触摸事件而不是点击：

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

它通过添加touchend和touchstart事件来工作，如果它们在200毫秒内发生，并且触摸没有太远，那么它是有效的触摸，否则不是。

它在2.2和4.0上运行得非常好。

- Ali