1

I've read several articles/posts on the dangers of having large or complex DOM changes inside an ng-repeat. Those are all interesting and make sense.

I have a big ng-repeat that takes about 10 seconds to DOM change and render in Chrome (independent of download time, etc). The result is exactly what the users need and they are willing to wait for the data that long, but it would be nice if they could still use the rest of the page while waiting.

These renderings happen in 50-100 loops of the ng-repeat. During this time, the users are unable to "click around", that is, clicks that run ng-show or ng-hide directives wait for the ng-repeat rendering to completely finish.

Is there any way to get my browser to run such functions, either in parallel or to just give priority to the ng-show/ng-hide functions, rather than insisting on running the ng-repeat in full? Perhaps there is a way to "manipulate DOM/render in the background" or with lower priority? Or perhaps there might be some way to "break up" the ng-repeat so that other interactions get a chance to run in between iterations? I imagine it isn't so simple inside the guts of AngularJS.

Note: This is for AngularJS, not Angular 2+.

Patrick Szalapski
  • 8,738
  • 11
  • 67
  • 129
  • Can you post your template? As @Maxim Shoustin suggests, infinite scroll is the way to go with something like this IMO. Your users are paying a heavy performance price and you're consuming tons of resources for things that they can't see. – Mike Feltman Aug 15 '17 at 13:47
  • Having such big DOM just makes no sense. Use virtual scroll. ANswering your question - no. – Petr Averyanov Aug 15 '17 at 13:51

1 Answers1

1

I have a big ng-repeat that takes about 10 seconds to DOM change and render in Chrome (independent of download time, etc). The result is exactly what the users need and they are willing to wait for the data that long, but it would be nice if they could still use the rest of the page while waiting.

Javascript (Angular in your case) runs single threaded (an event loop) so there is nothing to do.

In Angular 1.x ngRepeat directive for huge list is really pain and every developer solves it by his own way.

However You can improve usability. For example:

  • Don't show results till you loaded all data. During this period users can do their stuff
  • Don't load all items in ng-repeat. Load 5-10 with Load More .. button. Or use infinite Scroll feature to load dynamically when user scroll list down
  • try to remove AMAP watchers form list items (dropdowns, e.t.c)
Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225
  • I realize we can't have true multi-threading, but would there be any way to prioritize ng-show/ng-hide clicks over the ng-repeat iterations? The Load More might work--I'll look into that. Is there any good way to "ng-repeat" except in different calls? Are there common patterns to transforming a naive ng-repeat into a load-more paradigm? – Patrick Szalapski Aug 15 '17 at 12:59
  • @PatrickSzalapski Everything runs in one digest cycle. If you have more then 2K watchers per page - it will slow down. I would play with ng-repeat – Maxim Shoustin Aug 15 '17 at 13:03
  • @PatrickSzalapski at last, I integrated react into Angular only for these use cases – Maxim Shoustin Aug 15 '17 at 13:03
  • "Don't show results till you loaded all data." I agree, but in this case the bottleneck is in changing the DOM and rendering it, not in loading the data. – Patrick Szalapski Aug 15 '17 at 14:24
  • Here's a good link for easy "Load More" with ng-repeat: https://stackoverflow.com/questions/27437882/angular-directive-with-ng-repeat-ng-show-show-more-and-lazy-load – Patrick Szalapski Aug 15 '17 at 17:40