小编典典

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

javascript

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

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

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

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


阅读 248

收藏
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