为什么它会改善ng-repeat性能?

时间:2014-09-24 13:04:12

标签: angularjs performance cordova web-applications ionic-framework

假设一个名为refreshList的函数旨在调用REST API来检索包含项的JSON数组。

$scope.refreshList = function () {
  // assuming getting the response object from REST API (Json) here
  $scope.items = response.data.listItems;  
}

HTML方面的基本ng-repeat:

<div ng-repeat="item in items track by item.id">

然后,我添加了onPullToRefresh函数,由this directive触发,旨在触发刷新整个列表。

$scope.onPullToRefresh = function () {
  $scope.items = []; 
  $scope.refreshList();
} 

它的HTML是:

<ion-refresher on-refresh="onPullToRefresh()">
</ion-refresher>

问题是一些拉动刷新(滚动到顶部)可能会随机崩溃应用程序...

因此,我决定改变$scope.onPullToRefresh这样的函数:

$scope.onPullToRefresh = function () {
  //$scope.items = [];  commenting this line, causing the potential memory leak and the crash of the app
  $scope.refreshList();  
}

通过此更新,应用程序永远不会在我的iOS设备上崩溃:)

但是,我不能通过保持线条清空阵列来弄明白的主要区别。
它是否直接影响ng-repeat指令,导致一些混乱,因为REST API的承诺会立即重新分配内容?
实际上,在应用此修复程序之前,Xcode IDE(自cordova app以来)指出了此错误:EXC_BAD_ACCESS

这种行为可能是什么原因?

我指出Ionic(我正在使用的框架)目前正在使用Angular 1.2.17进行全面测试,所以我使用的是此版本。

1 个答案:

答案 0 :(得分:1)

这可能不是最好的答案,因为我不是100%肯定,但我建议它与摘要有关。

ng-repeat喜欢使用一个数组,而不是在刷新之间清除。它的设计更多,允许您动态添加/删除数组中的项目,并在摘要循环中相应地更新视图。您可以使用此功能为添加和删除的项目做一些不错的动画。

因此,当摘要到达时,你已经废弃了它正在观看的数组,并将一个新数组抛入它所拥有的内存中。

当数组中的每个项目都有长度时,请尝试(而不是清除数组$scope.items = [];.pop()

这样做会产生很小的影响。否则,ng-repeat的最佳“Angular”方式是通过将新项添加到数组并删除现在已经消失的任何内容来实现。