将类添加到 Android Webview 中的 DOM 元素时，CSS 样式更改需要 2-3 秒才能显示答案

【问题标题】：CSS styling changes take 2-3 seconds to show when adding a class to a DOM element in an Android Webview将类添加到 Android Webview 中的 DOM 元素时，CSS 样式更改需要 2-3 秒才能显示
【发布时间】：2014-08-20 18:49:59
【问题描述】：

假设我有一个 DOM 元素，一个 div 中的一堆文本

<div id="bio"> I'm Captain America! </div>

现在我在这个 div 上放置了一个 onClick 监听器，并且在 onClick 监听器回调函数中，我这样做了

$('.bio').addClass('red')

在我的 CSS 文件中，我有这一行

.red { color: red; }

如果我从普通的网络浏览器（Chrome、Firefox、Safari 等）尝试...点击时文本立即变为红色。但是，如果我从嵌入在 Android 应用程序中的 Android Webview 执行此操作，则文本需要 2-3 秒才能变为红色。

知道为什么吗？

【问题讨论】：

标签： javascript android jquery css android-webview

【解决方案1】：

我发现了这个问题 - 我的 WebAppInterface（Javascript 接口侦听器）中有一个阻塞的 HTTP 请求调用，导致调用完成时 UI 冻结到 2-3 秒。将其替换为非阻塞（异步）调用，现在效果很好。

【讨论】：

【解决方案2】：

虽然通常不需要 2-3 秒，但某些移动浏览器对点击事件的默认延迟为 300 毫秒。

您可以使用 FastClick 来解决此问题，这是一个消除此延迟的 javascript 库

https://github.com/ftlabs/fastclick

【讨论】：

似乎快了一点，但在应用样式更改之间仍然存在时间延迟。