Why ng-repeater decrease render performance as the number of rows increases

[Prem]

I am pushing data into collection as data arrived from server. It a continues process up to a certain limit

I am rendering the collection with ng-repeater. What I observed it that ng-repeater's rendering performance is decreasing as number of record in the collection increases. Why it is happening and how I can resolved this issue.

I tried using filter limitTo but I could not find satisfactory result although it may a solution to pagination. I have same question at stakeoverflow.com. 

http://stackoverflow.com/questions/24956289/please-explain-why-angular-ng-repeater-decrease-render-performance-as-the-number

Thank

Prem

[Sander Elias]

Hi Prem,

You didn't measure correctly. Every repeat creates a new scope. so your directive is setting the refTime on its local scope.

so you are measuring the time it took since putting in the first row. that will always increase :)

I updated your sample a bit: http://jsbin.com/bobufeye/1/edit

Regards

Sander

[Prem]

Thanks Sander,

I tried with your way and other corrected way as I discussed in the same stackoverflow.com question but I still can observed the same issue.

Here is the my final log after correcting the directive. I can tell for sure that my object collection is a complex object

Time taken to render row - 0 : 1029 

Time taken to render row - 1 : 6 ms 

Time taken to render row - 2 : 8 ms 

Time taken to render row - 3 : 8 ms 

Time taken to render row - 199 : 251 ms  

Time taken to render row - 200 : 241 ms   

Time taken to render row - 716 : 1053 ms 

Time taken to render row - 717 : 1055 ms

Thanks in advance,

Prem

[Sander Elias]

Hi Prem, 

After I updated your jsbin, the creation of every row took under a single Ms. The same for every row. row 1 and row 700 alike.

So the problem is not angular updating the DOM. 

I guess your problem is that you have a massive amount of 2 way bindings. This will slow down the page a lot.

(if you have 700 rows, with 5 bindings each, that's 3500!! bindings, all of those will run on every update of the page.)

you are say you have a complex model, so the true amount of bindings will probably a lot higher even than the 3500 I just mentions.

On a reasonable modern computer, in my experience up to 4000 bindings isn't a big problem, provided that it are all well written ones!

Do you really need all those bindings? Your user is scanning your table, and updates it by hand? The data is highly dynamic, and needs 

to be updated as soon as anything comes in from the server?

Also version 1.0.5 is quite old. The newer version of angular are way better equipped to deal with large(r) number of bindings.

Starting with 1.3.beta-10 (there is a version 17 already!) there is support for one-time bindings. I think this will solve your problem with the least of effort.

Regards

Sander

[Christopher Hiller]

If upgrading is not possible, this project may be helpful.

[Premchandra Singh]

Thanks Sander once again,

Version using: 1.2.9

Yes I have complex object and I have 31 columns in the repeater. Some of them (10 columns) are shown by default but rest are hidden initially using ng-show/ ng-hide and ready to show if user choose it. Out of 31 columns I am using two-way binding in only two columns rest are one-way binding with some formatting filters.

One final request can you please elaborate "all of those will run on every update of the page.", just curious to know the inner working of angular in this context.

Thanks Christopher I will try bindonce.

r-

Prem

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/LFfvSwHqDKw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Regard,
Prem

[Mauro Servienti]

Sander,

 

give something like {{::foo}} is there a way to ask Angular to re-evaluate the expression after is considered “stable”?

 

.m

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

[Sander Elias]

Mauro,

As far as I could figure out no. Unless you recompile/refresh the entire piece of DOM.

In this case, if you empty out the array that's traversed in the ng-repeat, and then repopulate, it will get 'updated'

Regards

Sander

[Sander Elias]

Hi Prem,

Every {{ something }} is a 2 way binding by default, and there will be a watch on it.

so you have at least 31 watches in every row. an ng-show and ng-hide also use a watch, as 

do some other directives. so you are probably up to 35-40 watches in each row.

doing the math, that's 700x35/40=17,500 to 28,000 watches. that's a lot.

If you push a new expression to the DOM, the logic inside there might change anything inside the ones already there.

So for everything you push into the DOM, all the watches fire. 

As there are no one-time bindings in the version you use, it has to run through all the watches every time.

Now you know this, I guess you are surprised that your solution is a quick as it is now ;) 

(adding your last row is executing 35 to 40 times all the watches...., now 1055Ms seems not so slow anymore is it?)

Regards

Sander

[Premchandra Singh]

Thanks Sander. I got the point

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/LFfvSwHqDKw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Regard,
Prem