Ng-repeat vs collection-repeat. Is there really any difference?


#1

Hey Guys,

I’ve been playing with lists and infinite scrolling and have everything working.

I have a backend API that my infinite list requests 20 items at a time from and adds it to a scope array which the DOM list is rendered from. My question is regarding ng-repeat vs collection-repeat.

I know the documentation says that for huge lists, collection-repeat is the way to go - in fact I see that said in several posts…my problem is I am unable to see any benefit either way! My problem is that I want to have variable height items, which collection-repeat does not allow…so I am trying to convince product owners that collection-repeat is the right call for performance but unless I have some metric to show…then I cant go to bat for it!

I switch my code to use ng-repeat, and collection-repeat and scroll down the page. each new 20 items is loaded and scrolling goes on happily down the list. scrolling up is smooth regardless of the repeat method. I have tried this experiment in the browser and the simulator, i even tried profiling it using xcode (though i admin i dont really know what i am doing there) but still all the memory profiler results turn out exactly the same. So where is the benefit?!

One though I had was that perhaps the infinite scrolling negates the benefit? or that simulators are still using the desktop cpu/ram thus are smooth? I just don’t see it. i’ve infinite scrolled 2000+ items and they seem identical.

TL:DR; The documentation says collection-repeat is better for long lists…where is the proof/justification?


#2

The difference between ng-repeat and collection-repeat is about performance when it comes to rendering the view (i.e. DOM). ng-repeat is good for small lists with a small number of items. Basically, it renders all the items in the DOM at once. collection-repeat differs from ng-repeat in that it selectively adds and removes items from the list depending on what is visible at the time.

So, for small lists, the performance difference is negligible. But as the list increases in size, ng-repeat's performance gradually drops off due to the fact that initial load time takes forever. Don’t use collection-repeat for small lists unless absolutely necessary, because adding and removing items from the list unnecessarily wastes processing time and power as you navigate that page.

EDIT: Read an article and apparently it is not a processing issue, it’s a memory problem. But the rationale behind the differences between these two directives is the same.


#3

@baph0mt - Thanks for the reply!

You perfectly summed up my understanding of the difference as well. And from my understanding as well, it is a memory concern as well.

The issue I have is showing any benefit of using collection-repeat over ng-repeat. In the video you linked he shows loading 2004 items immediately. Since I am loading only 20 items at a time (paged from the API) does that mean I am not seeing the benefit?

As i mentioned i setup a test app and lazy loaded thousands of list items (by continually scrolling down) and both collection-repeat and ng-repeat seemed to perform exactly the same. (only tested on ios)

Since collection-repeat has a fairly negative effect of having to hard code the height of the list items - I feel it may not be right for me if I cannot actually prove the documentation is correct for my application.


#4

Okay, I re-read your implementation details and it sounds like you’re pretty much dynamically loading the list anyways. If I read it correctly, your app queries the backend for 20 items at a time when you scroll down. That means your app allocates memory 20 items at a time. Whereas the app demo I linked, the author is allocating memory for 20000 items in one shot.

So I guess my answer would be that your implementation is somewhat redundant. collectionRepeat is intended to do exactly what you’ve apparently coded, though it has it extra benefit of removing items when they are out of view. If you remove your 20-at-a-time implementation and use ngRepeat on 2000 items, you should see the hit to app performance.


#5

Came across this post while trying to fix dynamic image sizing issue with collection-repeat.

Using ng-repeat, the images displayed properly. But when I switched to collection-repeat, the images overlapped each other.

Are there ways to resize the <div> after image loaded within the view?


#6

To resize the <div> inside the collection-repeat after it was rendered you should call apply() or applyAsync(): https://docs.angularjs.org/api/ng/type/$rootScope.Scope