如何在庞大的数据集（angular.js）上提高ngRepeat的性能？

一尘不染

如何在庞大的数据集（angular.js）上提高ngRepeat的性能？

javascript

我有一个巨大的数据集，其中包含数千行，每个行具有大约10个字段，大约2MB的数据。我需要在浏览器中显示它。最简单的方法（获取数据，将其放入$scope，ng- repeat=""执行其工作）可以很好地工作，但是当它开始将节点插入DOM时，它会使浏览器冻结大约半分钟。我应该如何解决这个问题？

一种选择是将行逐行追加，$scope并等待ngRepeat完成向DOM中插入一个块后再移至下一个。但是AFAIK
ngRepeat在完成“重复”操作时不会返回报告，因此会很丑陋。

另一种选择是将服务器上的数据拆分为页面，然后在多个请求中获取它们，但这更加丑陋。

我浏览了Angular文档以查找类似的内容ng-repeat="data in dataset" ng-repeat- steps="500"，但没有找到任何东西。我对Angular的方法还很陌生，所以有可能我完全没有注意这一点。最佳做法是什么？

阅读 211

2020-05-01

共1个答案

一尘不染

我同意@ AndreM96的观点，最好的方法是只显示有限数量的行，更快更好的UX，这可以通过分页或无限滚动来完成。

使用limitTo过滤器，使用Angular进行无限滚动非常简单。您只需要设置初始限制，当用户要求提供更多数据时（为简便起见，我使用按钮）就可以增加限制。

<table>
    <tr ng-repeat="d in data | limitTo:totalDisplayed"><td>{{d}}</td></tr>
</table>
<button class="btn" ng-click="loadMore()">Load more</button>

//the controller
$scope.totalDisplayed = 20;

$scope.loadMore = function () {
  $scope.totalDisplayed += 20;  
};

$scope.data = data;

这是一个JsBin。

这种方法对于手机可能是个问题，因为通常在滚动大量数据时它们会滞后，因此在这种情况下，我认为分页更为合适。

为此，您将需要limitTo过滤器和自定义过滤器来定义所显示数据的起点。

这是带有分页的JSBin。

2020-05-01