Android WebView：非常滞后的按钮响应答案

【问题标题】：Android WebView: Very laggy button responseAndroid WebView：非常滞后的按钮响应
【发布时间】：2011-11-14 14:10:40
【问题描述】：

我制作了一个小网络应用程序，用于使用 Android 的 WebView 功能。

我有一些用作按钮的 div（带有onclick 属性）。在试用应用程序（在设备的浏览器中）时，我立即注意到在点击按钮后有大量延迟。延迟出现在我点击按钮和浏览器显示橙色突出显示之间它。

我做了一些测试并得到了一些信息：

JavaScript 不是问题。我取消了所有脚本的链接并清除了所有 onclick 属性。性能没有改变。
CSS3 的东西不是问题。我去掉了所有花哨的渐变，性能没有改变。
元素的数量不是问题。我在页面上只使用了几个元素进行了尝试，性能没有改变。
Doctype 和元数据不是问题。我确定我使用的是 Android recommends。

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

我错过了什么吗？

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

【问题讨论】：

标签： javascript android html web-applications

【解决方案1】：

尝试插入html代码

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

快速点击点击点击不再是问题（对我来说。4.2.2和WebChromeClient）

【讨论】：

那个视口元标记是圣杯！忘记快速点击和所有那些废话。这就是你想要使用的。延迟是因为webview正在等待检测双击缩放，但是一旦你不想缩放，就不需要检测双击了:)
... X-UA-Compatible 完全没用，因为没有人在 Android 手机/平板电脑上安装 IE。

【解决方案2】：

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

只需将此代码放在您的页面上，现在使用 touch 事件而不是 click：

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

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

它在 2.2 和 4.0 上运行良好

【讨论】：

【解决方案3】：

因此，WebView 会保存每个点击事件以查看它是双击还是触摸移动事件。除了绑定到 touchstart 事件之外，还有另一种方法。如果您使用 viewport 元指令指定您的 WebView 不应缩放或滚动，触摸事件将立即到达您的代码（从 Gingerbread 开始）。

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

【讨论】：

"触摸事件将立即到达您的代码（从 Gingerbread 开始）。"我找不到任何证据来支持这种说法。此外，它似乎无法在我的 Gingerbread 设备上运行。

【解决方案4】：

基本上，移动浏览器上的点击事件会延迟 300 毫秒。你知道快速按钮模式吗？基本上你可以使用touchstart 事件（它会立即触发）。

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

【讨论】：