通过 phonegap 减少隐藏元素的资源消耗答案

【问题标题】：Reduce resource consumption for hidden elements with phonegap通过 phonegap 减少隐藏元素的资源消耗
【发布时间】：2013-09-25 22:08:29
【问题描述】：

我正在编写一个带有 html/js/css 和 phonegap 的网络应用程序。我在页面中有两个部分，每个部分都是一个长列表。同时，只有一个可见。当列表很长时，性能会越来越差。浏览器是否为 display:none 元素释放资源？如果没有，如何方便地释放隐藏部分的资源（并在需要时快速恢复）？

【问题讨论】：

如果这仍然是一个问题，我可以知道您如何处理滚动列表吗？瓶颈可能就在这里。我建议看一下iScroll 4 库。据我所知，它适用于 Android 2.3+ 和 iOS。也不要尝试在长列表中使用大量的文本阴影、渐变和其他 CSS3 优点。这些往往是性能猪。

【解决方案1】：

我很清楚你所说的长列表表现不佳是什么意思。看起来像屏幕撕裂一秒钟，然后它赶上。将以下内容放在 CSS 文件的顶层（试试 body{}）：

-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

【讨论】：

为什么将它添加到正文会使我的正文背景不显示？似乎建议用于 ios，但在 android 中存在错误。
真的吗？这很奇怪。但它能解决你的问题吗？上面的 css 规则用于删除 3D 转换并使它们变为 2D，从而提高性能。尝试将它们添加到 *{} 中。如果这不起作用，请将它们添加到元素中并继续上升直到它起作用。我真的不知道为什么它会打破背景。当然，除非您正在对背景进行一些 3D 转换。
这里建议的修复不是“万能的”解决方案。您应该注意，虽然 3D 动画对于移动设备来说肯定比 2D 动画要好得多。这个答案不会导致整个屏幕在视频卡而不是 CPU 上呈现。我只在实际制作动画时使用它们。否则我只会在 3D 动画对象的父元素上使用 -webkit-backface-visibility: hidden;。由于某种原因，它会阻止闪烁。