Android webview 延迟渲染答案

【问题标题】：Android webview late renderingAndroid webview 延迟渲染
【发布时间】：2023-03-15 17:35:01
【问题描述】：

我主要用 JS (Mootools) 和 HTML 编写了一个应用程序，它在我的应用程序中加载到 webview。

它只是一个 html 文件，通过添加或删除 nodisplay 类来显示或隐藏页面的部分（元素）：

.nodisplay {display:none}
function showPage1()
{
     $$('.pages').addClass('nodisplay');
     $('page1').removeClass('nodisplay');
}

在android 4（xperia arc 和galaxy note 2）中，我看到一个奇怪的延迟渲染，但我不知道旧版本的行为如何。当我隐藏一个元素并显示另一个元素时，它起初看起来是正确的，但在滚动过程中，旧元素的某些部分会出现几毫秒并立即消失。就像不可见区域的渲染被推迟到绘图时刻一样。

而且有时它在隐藏和显示过程中会奇怪地眨眼。

在 PC 上的 chrome 中没有任何问题。即使在 AVD 中，它也非常清晰，没有任何闪烁。

不知道是不是android的问题，有没有什么办法可以克服？！

我试过android:hardwareAccelerated="false"|"true"，没有效果。还有ws.enableSmoothTransition() 也没有解决问题。

【问题讨论】：

标签： javascript android webview

【解决方案1】：

这是我的“Fix your webview app in one stack answer（第一版）”：

性能

在 JS 中保留对页面元素的引用以提高性能。 $('.page1') 每次更改页面时都必须解析 DOM，而且这只发生一次。这也适用于$('.pages') - 它必须对多个元素进行扫描和执行操作。相反，我建议您保留一个活跃的页面参考。也许它应该看起来像这样：

function showPage(page) { // receive active page; page is the jQuery ref to the next page
    activePage.addClass('nodisplay'); // activePage is the jQuery ref to the previous page
    page.removeClass('nodisplay'); // show the page
}

您应该扫描整个应用程序并修复此类问题。它们可能看起来没什么大不了，但我相信它们可以在资源有限的移动操作系统中发挥作用。

DOM 管理

如果您还没有，您绝对应该使用模板。除了帮助您管理应用程序外，模板还有助于保持 DOM 尽可能轻量：您可以从 0 开始并在需要时动态创建它们，而不是拥有 100 个页面元素。为了获得最佳性能，请确保您只渲染每个模板一次 - 在渲染之前检查页面是否已存在于 DOM 中。要了解这对您的应用有何影响，只需谷歌“浏览器重排”即可。

这项工作有很多工具。考虑到您当前的设置，您可以选择：http://mootools.net/forge/p/template。以下是一些其他选项： http://mustache.github.com/，http://underscorejs.org/#template，http://api.jquery.com/category/plugins/templates/。

用户界面

也非常重要但非常广泛。需要记住的一些事项：

轻量级、语义化和有效的标记
js 应该只管理数据和状态。动画和 DOM 更新会减慢你的速度。利用 css3 友好的环境
优化图像并尝试仅将它们用作视觉效果。如果您无法避免这种情况，精灵总是一个好主意。

调试

可能会很痛苦。我发现 weinre 非常有用：http://people.apache.org/~pmuellr/weinre/docs/latest/。 try ... catch 块规则！对 logcat 输出有帮助：http://jsharkey.org/blog/2009/04/22/modifying-the-android-logcat-stream-for-full-color-debugging/。

归根结底，webview 仍然是一个恶劣的环境，尽管最近它已成为一种可行的选择，但它需要大量的思考和计划才能“做好”。

希望这会有所帮助。

【讨论】：

这正是我做事的方式！

【解决方案2】：

我对带有 webkit 的 html 了解不多。但是我的一个项目在隐藏和显示滚动效果时遇到了相同的滚动问题。我已经为 webview 启用了硬件加速。

也许你应该try this。

【讨论】：

【解决方案3】：

.nodisplay {height:0; display:none; }

在这里工作...

【讨论】：

【解决方案4】：

也试试这段代码，它对我有很大帮助.. -webkit-transform: translateZ(0); 你可以看看我的代码，它对我有帮助.. jquery toggle (show/hide) based on selector

也可以看看下面的链接； http://www.html5rocks.com/en/mobile/optimization-and-performance/

【讨论】：

【解决方案5】：

Ajay 的回答给了我一些我在另一个项目中使用过的东西的提示，这样我就可以使 WebView 背景透明。直到现在我还不知道代码会关闭硬件加速。我在这个项目中测试了代码的和平，并且不再有延迟渲染。虽然滚动页面没有以前那么流畅，但总比延迟渲染好。

这是解决所有这些问题的代码：

if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

顺便说一句，就像定义android:hardwareAccelerated="false" 不会影响webview！

【讨论】：

反对者不知道他们在说什么。硬件层上的 WebView 在页面重排时非常滞后，在 Android 4.2 中仍然如此。软件层上的 WebView 重排和重新渲染的速度要快得多，但在其他方面的性能要差得多，比如当您使用 css 转换移动东西时。