I have an editor that uses many collapsible panels generated through ngRepeat. The issue is that after a while screen render time gets to be huge. However, with some investigation I have found some simple solutions.
- If you look at the cause of the problem, you will find that the browser is kicking in the garbage collector (GC). The GC is a slow process. So you need to reduce the impact of the object creation. For that I re-evaluated the number of objects that I created, and refactored as many as I could to stateless.
- Results: Minor Impact
- Then I looked at the content being rendered. Each panel was using an ngInclude, to load the proper sub view into the panels. So created a content that would load sub views that were all blank.
- Results: Major Impact
- Now that I found my culprit, I decided to look at how I can NOT load the sub views, unless the panels were expanded. That is where I switched the code from using ngHide and ngShow, which both of these are CSS impact directives, to using ngIf.
- ngHide and ngShow were both allowing full rendering of the child elements under them, even when hidden. So I was wasting processing time rendering stuff that I wasn’t looking at.
- ngIf suppresses all activities under it, and removes the child elements. Generally that means a lot less memory consumption and a savings in processing time.
- Result: Problem Fixed
So the real point here is that if you are going to us ngRepeat for long lists, be absolutely sure that you are not going to create a cascade of burned processing time, rendering stuff that you are not going to use.
Brian By Experience 