为什么在Cordova/Phonegap Webkit浏览器中使用CSS3转换会导致内存泄漏



我有一个运行在Android 4.0.4上的Cordova 3.3.1应用程序,它以15秒的间隔循环显示图像。我目前已经实现了一个交叉火力解决方案,如下所示:http://jsfiddle.net/chaddjohnson/ka9cqdnt/16/.该解决方案依赖于在同一位置分层的两个图像,并且顶部图像的不透明度每15秒从0变为100(反之亦然)。这是应用程序中的唯一页面。

奇怪的是,我发现如果我包含CSS转换,Cordova应用程序会导致设备的内存在一个小时内减少,最终应用程序会崩溃。这是我正在使用的CSS:

.ad-image:last-child {
-webkit-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}

我绝对相信这是造成问题的原因,因为当我只删除这些CSS行时,应用程序运行良好,没有内存泄漏。当我把这些行加回来的时候,内存泄漏会重复出现。

有人知道为什么会发生内存泄漏吗?这是Webkit错误吗?或者可能与我的实现有关(请参阅jsfiddle)?

我自己也经常遇到这个问题。事实上,我决定禁用各种效果。尤其是页面之间的效果。我认为这个问题源于网络观点。如果你使用android原生代码,android将管理内存,这种问题不会经常发生。当然,你可以做一些事情,比如禁用硬件加速,但相信我,它仍然没有达到你想要的效果。我的建议是尽可能避免任何不必要的影响。

您可以尝试删除:last-child属性并为最后一个元素分配一个类(临时)吗?只是为了孤立问题。

:last-child选择器还是转换导致内存泄漏?

此外,您可以将-webkit-transform: translate3d(0,0,0);添加到选择器中以激活硬件加速吗?

本机应用程序可以访问设备的图形处理单元(GPU)使像素飞行。另一方面,Web应用程序运行在浏览器的上下文,该上下文允许软件执行大部分操作(如果不是all),从而减少了转换的马力。但网络已经迎头赶上,大多数浏览器供应商现在都提供通过特定CSS规则的图形硬件加速。

此外,如果仍然不起作用,请尝试将-webkit-backface-visibility: hidden;添加到选择器中。

相关内容

  • 没有找到相关文章

最新更新