如何提高巨型数据集(angular.js)上的ngRepeat性能？
我有一个几千行的巨大数据集，每行大约有10个字段，大约2MB的数据。我需要在浏览器中显示它。最直接的方法(获取数据，将其放入$scope，让ng-repeat=""完成它的工作)工作得很好，但是当它开始将节点插入DOM时，它会使浏览器冻结大约半分钟。我应该如何处理这个问题？
一种选择是递增地将行附加到$scope，并等待ngRepeat完成将一个块插入到DOM中，然后再移动到下一个块。但是当AFAIK ngRepeat完成“重复”时，它不会报告，所以它将是丑陋的。
另一种选择是将服务器上的数据拆分为多个页面，并在多个请求中获取它们，但这更加丑陋。
我查阅了Angular文档，寻找类似ng-repeat="data in dataset" ng-repeat-steps="500"的东西，但什么也没有找到。我对Angular方式相当陌生，所以我可能完全忽略了这一点。这方面的最佳实践是什么？
回答 7
Stack Overflow用户
发布于 2013-06-28 02:42:29
我同意@AndreM96的观点，最好的方法是只显示有限数量的行，更快更好的UX，这可以通过分页或无限滚动来完成。
无限滚动与角度是非常简单的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。
Stack Overflow用户
发布于 2015-11-27 17:45:12
除了上面的所有提示，比如track by和更小的循环，这个也对我有很大的帮助
<span ng-bind="::stock.name"></span>这段代码将在加载后打印名称，并在加载后停止查看。类似地，对于ng-repeats，它可以用作
<div ng-repeat="stock in ::ctrl.stocks">{{::stock.name}}</div>但是，它只适用于AngularJS 1.3版和更高版本。来自http://www.befundoo.com/blog/optimizing-ng-repeat-in-angularjs/
Stack Overflow用户
发布于 2015-05-01 22:05:33
您可以使用track by来提高性能：
<div ng-repeat="a in arr track by a.trackingKey">比以下速度快：
<div ng-repeat="a in arr">参考：https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications
https://stackoverflow.com/questions/17348058
复制相似问题
腾讯云开发者
