12

我主要用 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()这也不能解决问题。

4

5 回答 5

10

这是我的“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 中。要查看这如何影响您的应用，只需 google “浏览器重排”。

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

用户界面

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

  • 轻量级、语义化和有效的标记
  • Node.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 仍然是一个恶劣的环境，尽管最近它已成为一种可行的选择，但它需要大量的思考和计划才能“正确”。

希望这可以帮助。

于 2012-12-23T11:52:36.167 回答
4

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

也许你应该试试这个。

于 2012-12-26T05:14:16.290 回答
1

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

在这里工作...

于 2012-12-19T11:11:05.963 回答
0

Ajay answer gave me a hint of something I used in another project so I could make WebView background transparent. Till now I didn't know that code turns off hardware acceleration. I tested that peace of code in this project and there is no late rendering anymore. although scrolling the page is not as smooth as before but it's better than late rendering.

This is the code to fix all of this:

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

By the way, it's like defining android:hardwareAccelerated="false" doesn't affect webview!

于 2012-12-26T10:59:21.900 回答
0

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

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

于 2013-04-09T09:06:57.077 回答