如何在庞大的数据集 (angular.js) 上提高 ngRepeat 的性能? [英] How to improve performance of ngRepeat over a huge dataset (angular.js)?

问题描述

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

I have a huge dataset of several thousand rows with around 10 fields each, about 2MBs of data. I need to display it in the browser. Most straightforward approach (fetch data, put it into $scope, let ng-repeat="" do its job) works fine, but it freezes the browser for about half of a minute when it starts inserting nodes into DOM. How should I approach this problem?

一种选择是将行以增量方式附加到 $scope 并等待 ngRepeat 在移动到下一个块之前完成将一个块插入到 DOM 中.但是 AFAIK ngRepeat 在完成重复"后不会返回报告，所以它会很丑.

One option is to append rows to $scope incrementally and wait for ngRepeat to finish inserting one chunk into DOM before moving to the next one. But AFAIK ngRepeat does not report back when it finishes "repeating", so it's going to be ugly.

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

Other option is to split data on the server into pages and fetch them in multiple requests, but that's even uglier.

我查看了 Angular 文档以寻找诸如 ng-repeat="data in dataset" ng-repeat-steps="500" 之类的内容，但一无所获.我对 Angular 的方式还很陌生，所以我可能完全忽略了这一点.这方面的最佳做法是什么?

I looked through Angular documentation in search of something like ng-repeat="data in dataset" ng-repeat-steps="500", but found nothing. I am fairly new to Angular ways, so it is possible that I am missing the point completely. What are the best practices at this?

推荐答案

我同意 @AndreM96 的观点，即最好的方法是只显示有限数量的行，更快更好的 UX，这可以通过分页或使用无限滚动.

I agree with @AndreM96 that the best approach is to display only a limited amount of rows, faster and better UX, this could be done with a pagination or with an infinite scroll.

使用 limitTo 过滤器，Angular 的无限滚动非常简单.您只需要设置初始限制，当用户要求更多数据时(为简单起见，我使用按钮)您增加限制.

Infinite scroll with Angular is really simple with limitTo filter. You just have to set the initial limit and when the user asks for more data (I am using a button for simplicity) you increment the limit.

<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.

这种方法对于手机来说可能是个问题，因为通常它们在滚动大量数据时会滞后，所以在这种情况下，我认为分页更适合.

This approach could be a problem for phones because usually they lag when scrolling a lot of data, so in this case I think a pagination fits better.

要做到这一点，您将需要 limitTo 过滤器和一个自定义过滤器来定义所显示数据的起点.

To do it you will need the limitTo filter and also a custom filter to define the starting point of the data being displayed.

这是一个带有分页的 JSBin.

Here is a JSBin with a pagination.

这篇关于如何在庞大的数据集 (angular.js) 上提高 ngRepeat 的性能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！