如何解决如何在庞大的数据集angular.js上提高 ngRepeat 的性能?
我同意@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 。
解决方法
我有一个包含数千行的庞大数据集,每行大约有 10 个字段,大约 2MB
的数据。我需要在浏览器中显示它。最直接的方法(获取数据,将其放入$scope
,让其ng-repeat=""
完成工作)工作正常,但是当它开始将节点插入
DOM 时,它会冻结浏览器大约半分钟。我应该如何解决这个问题?
一种选择是以$scope
增量方式追加行,并等待ngRepeat
完成将一个块插入 DOM 后再移动到下一个块。但是 AFAIK ngRepeat
在完成“重复”时不会报告,所以它会很丑陋。
另一种选择是将服务器上的数据拆分为页面并在多个请求中获取它们,但这更难看。
我查看了 Angular 文档以寻找类似的ng-repeat="data in dataset" ng-repeat-
steps="500"
内容,但一无所获。我对 Angular 方式相当陌生,所以我可能完全错过了这一点。这方面的最佳做法是什么?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。