javascript - 如何在庞大的数据集(angular.js)上提高 ngRepeat 的性能？

Question

我有一个包含数千行的庞大数据集，每行大约有 10 个字段，大约 2MB 的数据。我需要在浏览器中显示它。最直接的方法(获取数据，将其放入 $scope，让 ng-repeat="" 完成它的工作)工作正常，但它会卡住浏览器大约一半开始将节点插入 DOM 的一分钟。我应该如何解决这个问题？

一种选择是增量地追加行到 $scope 并等待 ngRepeat 在移动到下一个之前完成将一个 block 插入到 DOM 中。但是 AFAIK ngRepeat 在完成“重复”时不会报告，所以它会很丑。

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

我查看了 Angular 文档以寻找类似 ng-repeat="data in dataset"ng-repeat-steps="500" 的内容，但一无所获。我对 Angular 方式相当陌生，所以我可能完全错过了这一点。这方面的最佳做法是什么？

Answer 1

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

使用 Angular 无限滚动真的很简单 limitTo筛选。您只需要设置初始限制，当用户要求更多数据时(为了简单起见，我使用按钮)您增加限制。

<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带有分页。