1

I have been observing the decrease in render performance of angular ng-repeater as number of rows increases

Here is my experiment. http://jsbin.com/quyofifa/1/edit?html,js,console,output

When you run the experiment you will find that as number of rows increases time taken to render the row(DOM) increases. I measure this statistic by creating a directive which will execute when each row rendered and log time difference into console.

So here is my question why it is happening (internal detail) and how I can resolve this issue. I tried using filter limitTo but I could not find satisfactory result although it may a solution to pagination.

Community
  • 1
  • 1
Premchandra Singh
  • 14,156
  • 4
  • 31
  • 37
  • Same as you can finish reading a page of the book faster than reading the whole book... – zs2020 Jul 25 '14 at 13:00
  • That does look wrong though. If it really took an average of 90ms to load each row, it would have taken 50 seconds to write them all. But the JSBin has taken less than a couple seconds to load all the rows. – Goodzilla Jul 25 '14 at 13:01
  • @zsong that's not exactly the same, because you have some average time per page. and the time increases per page in his example. – Raphael Müller Jul 25 '14 at 13:02
  • @Premchandra I think it's probably a problem with the implementation. the refTime isn't updated properly. so i made an edit to your implementation: http://jsbin.com/quyofifa/4/edit this one displays for every row around 0 to 1ms. – Raphael Müller Jul 25 '14 at 13:16
  • right, if you comment out `//$scope.refTime = (new Date()).getTime();` get same results, demo is measuring elapsed time – charlietfl Jul 25 '14 at 13:21
  • @RaphaelMüller I can't exactly say which implementation, mine or your is correct, may be your implementation is correct referring to charlietfl's way. Updating $scope.refTime makes angular busy to do his work resulting more delay, that become another point of discussion. But what I observed in my app is that when I used large number of complex object I find significant delay in rendering the item at higher index than rending starting item in the collection. – Premchandra Singh Jul 25 '14 at 14:03
  • This is my actual log after I modified my directive as @RaphaelMüller tried `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 - 4 : 10 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` Unfortunately problem still persist. **One more point I am pushing record into collection as data received from data source** – Premchandra Singh Jul 25 '14 at 14:13

0 Answers0