如何提高在一个巨大的数据集（angular.js）ngRepeat的表现呢？ [英] How to improve performance of ngRepeat over a huge dataset (angular.js)?

问题描述

我有几千行，每约10场，有关数据的2MBS一个巨大的数据集。我需要在浏览器中显示。最直接的方法（获取数据，把它放入 $范围，让 NG-重复=做的工作）做工精细，但它冻结浏览器约半分钟的启动节点插入到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?

一种选择是追加行 $范围递增，并等待 ngRepeat 来完成插入一个数据块到DOM之前移动到下一个。但据我所知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.

我通过角文档看上去在寻找像 NG-重复=数据集NG-重复步骤=500，但一无所获。我是相当新的角的方式，所以它可能是我完全错过了点。什么是最好的做法，在这？

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 过滤真的很简单。你只需要设置初始限制，当用户要求更多的数据（我使用简单的一个按钮），你增加了限制。

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 一个分页。

这篇关于如何提高在一个巨大的数据集（angular.js）ngRepeat的表现呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！