Question

我已经在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()也没有解决问题。

Answer 1

这是我的“在一个堆栈答案（第一版）中修复您的webview应用程序”：

<强>性能

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

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/。

<强> UI

同样非常重要但非常广阔。要记住的一些事情：

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

<强>调试

可能很痛苦。我发现它们非常有用：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仍然是一个恶劣的环境，虽然最近它已成为一个可行的选择，但它需要大量的思考和计划才能“做到正确”。

希望这有帮助。

Answer 2

我对webkit的html知之甚少。但是我的一个项目是在隐藏和显示滚动效果方面存在相同的滚动问题。我已经为webview启用了硬件加速。

可能你应该try this。

Answer 3

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

在这里工作......

Answer 4

Ajay回答给了我一些我在另一个项目中使用过的东西，所以我可以使WebView背景透明。直到现在我还不知道代码会关闭硬件加速。我在这个项目中测试了代码的安静性，并且不再有后期渲染。虽然滚动页面不像以前那么流畅，但它比晚期渲染更好。

这是修复所有这些的代码：

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

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

Answer 5

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

另请查看下面的链接; http://www.html5rocks.com/en/mobile/optimization-and-performance/

Android webview后期渲染

5 个答案: