Angular: Do more components cause a decrease in performance?

user_3261212 0
Viewed 574

I have a component that calls itself recursively to create a tree. Sometimes this tree can be really large (100+ levels). I notice a huge performance decrease when the tree is large but can't figure out what causes this. Is it better to not create a recursive component and instead make only the html recursive or should the amount of components not matter for performance meaning the problem lays elsewhere?

angular
4 Answers

The main reason for this is the Angular dirty checking mechanism.

If one of the following 3 situations occurs on your page, "Angular" checks all your components in this tree structure in case there has been a change.

  • Event listener. The DOM event listener can update the data in an Angular component and also trigger change detection.
  • Macro and Micro tasks. setTimeout(), setInterval(), Promises...
  • HTTP Data Request.(XHR requests.)

https://angular.io/guide/zone#when-apps-update-html

For example, you have an input element, and you entered a in this entry. Since this process is included in the scope of EVENT (change, keydown, keypress), Angular starts to control all components in the tree. Therefore, the more components you have, the more this process will turn into a nightmare after a while.

So what is the solution to this?

The solution could be "stop checking all components" for change elsewhere.

For this, you have to write all your components according to the change detection strategy. Since it is a very detailed topic, I'll just leave the key words here. Your components must be in the OnPush strategy.

https://angular.io/api/core/ChangeDetectionStrategy#OnPush

For more detailed information, you should review the change detection detector.

https://angular.io/api/core/ChangeDetectorRef

You can also use the ngDoCheck lifecycle for your performance testing. Your component will enter this cycle every time it is checked.

https://angular.io/api/core/DoCheck

user_64783590

yeah the problem is to charge a component a lot of time, if you do the sime thing in a component (don't print the component but a paragraph)

user_145075810

In the browser, open "Developer Tools", then the "Performance" tab. You can record a recources used over a period of time.

The results can be displayed in different graph types. That should give you some insight what function exactly is using resources.

Then you can optimize that function, or decide that an entirely different approach may give better results.

user_55203540

It depends on what your component is doing. Once I have built a tree and I realized the following:

  • create I/O components to render the levels;
  • Manage the logic in a parent component or service;
  • Only gives to angular component what needs to be rendered;
  • in that specific case, make sure you have full control of the change detection using the the "onPush" change detection strategy instead the Default;
  • Make use of the "trackBy" option for the "ngFor". This will avoid angular to rerender elements that were not changed.
  • use css classes instead directives to styling those specific tree levels elements. This requires more computation to get the element reference and set the classes to it.
user_82496950
Related