首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何提高巨型数据集(angular.js)上的ngRepeat性能?

如何提高巨型数据集(angular.js)上的ngRepeat性能?
EN

Stack Overflow用户
提问于 2013-06-28 00:07:12
回答 7查看 141.6K关注 0票数 167

我有一个几千行的巨大数据集,每行大约有10个字段,大约2MB的数据。我需要在浏览器中显示它。最直接的方法(获取数据,将其放入$scope,让ng-repeat=""完成它的工作)工作得很好,但是当它开始将节点插入DOM时,它会使浏览器冻结大约半分钟。我应该如何处理这个问题?

一种选择是递增地将行附加到$scope,并等待ngRepeat完成将一个块插入到DOM中,然后再移动到下一个块。但是当AFAIK ngRepeat完成“重复”时,它不会报告,所以它将是丑陋的。

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

我查阅了Angular文档,寻找类似ng-repeat="data in dataset" ng-repeat-steps="500"的东西,但什么也没有找到。我对Angular方式相当陌生,所以我可能完全忽略了这一点。这方面的最佳实践是什么?

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2013-06-28 02:42:29

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

无限滚动与角度是非常简单的limitTo过滤器。您只需设置初始限制,当用户要求更多数据时(为简单起见,我使用的是一个按钮),您就会增加限制。

代码语言:javascript
复制
<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

票数 161
EN

Stack Overflow用户

发布于 2015-11-27 17:45:12

除了上面的所有提示,比如track by和更小的循环,这个也对我有很大的帮助

代码语言:javascript
复制
<span ng-bind="::stock.name"></span>

这段代码将在加载后打印名称,并在加载后停止查看。类似地,对于ng-repeats,它可以用作

代码语言:javascript
复制
<div ng-repeat="stock in ::ctrl.stocks">{{::stock.name}}</div>

但是,它只适用于AngularJS 1.3版和更高版本。来自http://www.befundoo.com/blog/optimizing-ng-repeat-in-angularjs/

票数 15
EN

Stack Overflow用户

发布于 2015-05-01 22:05:33

您可以使用track by来提高性能:

代码语言:javascript
复制
<div ng-repeat="a in arr track by a.trackingKey">

比以下速度快:

代码语言:javascript
复制
<div ng-repeat="a in arr">

参考:https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications

票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17348058

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档