How to Improve Performance of Ngrepeat Over a Huge Dataset (Angular.Js)

How to improve performance of ngRepeat over a huge dataset (angular.js)?

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.

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;

Here is a 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.

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

Here is a JSBin with a pagination.

Angular.Js Performance, large dataset, ng-repeat, html table with filters and two way binding

I have recently ran into a similar issue with ~60k items, filterable, expandable, full of icons in each entry and stuff like this. It was extremely heavy and even though our team implemented some performance enhancements (like filtering, trackby, limitTo, pagination) it still was quite a mess especially in IE (even in IE11) which we unfortunately have to support.

From the aforementioned enhancements pagination helped the most (as Nitishkumar Singh also suggests) but still wasn't enough for a smooth UX. Nitishkumar's answer sums up perfectly each point you asked for I would just like to point you towards React (very great documentation imho) and ngReact which will help you achieve what you wish. Our team started to look into React and possible integration to our already extensive AngularJS project(s) and realized it is quite a common thing to do so. Several addons you will find (such as ngReact, angular2react, react2angular, etc.) which helps you with integration.

This is a codepen I worked on to test some features of React while learning how it actually works. I am no expert on React but after a few days of digging and learning I could come up with a solution that now loads 3*20k items with several features that runs smoothly even on IE9.

My answer is not supposed to be a 'I suggest React because it is so cool' especially since I am no expert on React either, just wanted to share this quite new (actually ongoing) experience and how we overcame it.

At the very end we ended up with this tiny snippet in our template (check the codepen for full, just had to copy some code):

ReactDOM.render(
   <Header parents={parentArray} suppliers={supplierArray} bsrs={bsrArray}/>,
   document.getElementById('app')
);

Some further reading on AngularJS + React which I found useful:

https://blog.logentries.com/2016/02/combining-angularjs-and-reactjs-for-better-applications/

Can angular and react play together?

https://www.quora.com/Why-would-someone-combine-AngularJS-with-ReactJS-when-they-do-the-same-thing

How to speed up an AngularJS Application?

The thing you can do that will speed up your Angular app the most is to reduce those bindings where you can. One way to do this would be to create a directive that built out the table for you with DOM manipulation rather than using ng-repeats. This will reduce the number of overall watches you have to process, and make that $digest a lot faster.

I know it's ugly to do that, but Angular's not really meant to set up 3000+ bindings. Since it does a digest and it's not an observer pattern, it really slows things down have that many set up.

You could even do a hybrid approach, where you still used the ng-repeat, but all of the values were placed in the DOM with straight DOM manipulation from a custom directive, thus avoiding all of the bindings.

angularjs ng-model inside ng-repeat has poor performance

It is generally a bad idea to have too many input elements on the same page. This is why professional data grid editors opt for editing only a single data row at a time either in a separate pop-up window or in-line. Even when it is used in-line, the objects are injected on-the-fly.

An input element is simply too heavy to have too many of them on the same page. I have done the same mistakes in the past, trying to implement a data grid where all editable fields were input elements from the beginning. On top of that, you have to keep a live angular model binding, which adds a performance overhead.

One of the easiest ways to do it in your case is to implement a directive that displays as a span element until it is clicked and swap for an input element on click event. Another alternative – have both and toggle their visibility style. The latter is probably even easier from within angular directive, but not as efficient perhaps.

Also keep an eye on other bindings that you have. When it comes to data grids this becomes important. In Angular 1.3 you can now use "::" syntax for one-time bindings, which also may help.

Load large dataset with nested ng-repeat in angular and ionic

Angular creates watchers for you're expressions in the html, it is well known that over 2000 watxhers at a time has a very bad performance impact, I do not know how data you are using bit apparently you hit the 2000 mark, so we will need to reduce the amount of watchers you have.
Let's start with replacing every ng-show you have to ng-if it should improve you're performance rapidlly,
Secondly you should think if you can one-time bindings in you're code, one time binding is used like {{ :: expression }}
It will not create a new watcher, and if you have some values you bind and they should not change on runtime you should use the one-time binding,
Last but not least when you use ng-repeat always use 'track by $index' this has a huge performance impact if you're repeated list is interactive, you should read about it more in here - https://docs.angularjs.org/api/ng/directive/ngRepeat

Good luck!

AngularJs view takes too long to load more than 1300 items

Ok guys Thanks to this thread
I found a solution. I want to share with you my implementation

In ng-repeat I inserted "limitTo" filter:

<div ng-repeat="txt in filtered = (vm.datatxts.txts | limitTo:vm.totalDisplayed | filter: textFilter)">

---

Related Topics