Angular 1.6 many instances of the same component on a page

Question

I have a component inside an ng-repeat , and sometimes it creates a really big number of components (over 1000), causing a significant delay (several seconds) on page load. Profiler shows that all code that causes noticeable delay is executed inside angular or angular-select (which is used by my custom component), so it's not related to my code, although it might be related to some watches that I'm setting.

What is the common way of dealing with this? Is it possible to initialize a component only once and create multiple instances without calling the same code thousands of times?

Answer 1

Usually a component cannot be initialized once and cloned. It would be possible for purely static component, but compilation wouldn't be a bottleneck for this case.

When there's a significant number of component/directive instances that should be necessarily displayed simultaneously, they have to be modified to not use data binding if possible, or use one-time watchers. This way watchers count stays within a desirable limit (usually ~1000 watchers).

Custom solutions can be used instead of ng-repeat for performance boost. And 1000 components preferably shouldn't be displayed at once.

There are several infinite scroll solutions for Angular that limit the items to the ones that are shown in visible area.