网页移动应用闪烁问题的根本原因



我刚刚创建了一个基于jqTouch和Zepto的简单Apache Cordova应用程序。

应用程序有3个页面,一个包含一个形式的4个控件,其他页面3个导航元素和几行文本

使用jqTouch的applejqtouch主题,应用程序显示大量的闪烁。在页面过渡期间,屏幕的某些部分呈现黑色。

jqTouch的innsbruck主题有一个少闪烁,但仍然是绝不准备生产。

测试应用程序不使用附加的javaScript。所有导航都是使用#pageName链接完成的。因此,用户提供的JavaScript在这里可能没有问题。

有趣的是:如果我使用内置的移动浏览器打开jqTouch演示,它们会以执行,而的闪烁要少得多。

由于应用程序非常简单-它甚至没有使用额外的样式或图像-,我想知道这些渲染问题的根本原因是什么

使用这个环境测试:

  • Apache Cordova 3.0.5
  • Android 10/24/11
  • Nexus 7

Appcelerator Titanium - Poor too

另外,我用rss的例子给了Appcelerator Titanium一个尝试。使用测试设备时,性能也很差。

Appcelerator声明编译为本机。但由于性能不佳,我猜他们也编译成WebViews。

吗?或者Appcelerator Titanium将视图和控制器编译为纯JavaCode?

下一步

接下来,我要给Xamarin一个尝试。

首先,本机浏览器将比您的Cordova应用程序更高效。
Cordova使用的是webview,它没有那么强大。

除此之外,你看到的闪烁问题是可以通过在GPU上渲染元素来修复的。
通过CSS你可以指定:

transform-style: preserve-3d;

transform: translate3d(0,0,0);

加上所需的供应商前缀。

这将强制你的元素由GPU渲染。并将修复你的闪烁问题,但你必须针对有问题的元素。

相关内容

  • 没有找到相关文章

最新更新