提高android中phonegap应用的滚动性能答案

【问题标题】：Improve scrolling performance of phonegap app in android提高android中phonegap应用的滚动性能
【发布时间】：2014-08-19 10:47:58
【问题描述】：

我正在开发一个使用 ionic、angular 和 cordova 构建的移动应用程序。我有一个包含 500 个项目的列表，并且三星 Note I 的滚动效果很差。我知道 500 是一个有点大的数字，但我很想知道是否有任何方法可以提高性能。

这是代码，

<ion-list show-delete="showDelete"> 
      <ion-item ng-repeat="user in users" type="item-text-wrap" href="#/tab/user/{{user.id}}" class="item-thumbnail-left item-icon-right">
        <img src="{{user.image}}">
        <h2>{{user.name}}</h2>
        <p>{{user.role}}</p>
        <i class="icon ion-ios7-arrow-right"></i>
        <ion-delete-button class="ion-minus-circled" ng-click="delete(user)">
        </ion-delete-button>
      </ion-item>
    </ion-list>

【问题讨论】：

根据我的经验，性能是您为使用 Cordova+Angular 提供的生产力而牺牲的东西。我在一年前对我们的产品进行测试时使用了这种组合。我们最终使用了 JQuery移动设备来创建 UI 虚拟化，而不是使用 Angular。注意：我们没有使用离子。
如果您刚刚开始您的项目并且您有严格的性能要求，如果您对 C# 感到满意或尝试使用本机解决方案，我建议您看看 Xamarin。请注意，如果您实现 UI 虚拟化并重复使用 4-5 个屏幕的项目，那么包含 500 个项目的列表对于 PhoneGap 来说确实没有问题。
Xamarin 不是免费的，我不能接受。也许我可以在 Phonegap 中尝试 UI 虚拟化。
这个想法基本上是重复使用列表项。一旦它们落在视图之外，只需重新定位它们并手动设置数据。我们曾经以这种方式拥有 100 个实时列表项，滚动没有任何问题。
我会检查并找到我们使用的源代码并尽快将其粘贴为答案。

标签： android cordova mobile ionic-framework

【解决方案1】：

高性能大列表的秘诀在于重用 DOM 元素。您可能有 500 个项目，但同时屏幕上只有 10 个。因此，我们可以通过在元素离开屏幕时回收它们来节省大量内存和 CPU 时间。

Ionic 附带了一个指令，可以做到这一点 - check it out.

【讨论】：