Speeding up large collapsible list binding with #AngularJS.

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.

  1. 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.
    1. Results: Minor Impact
  2. 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.
    1. Results: Major Impact
  3. 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.
    1. 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.
    2. 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.
    3. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.