Data binding slow - Angular 5

Question

I'm developing an Angular 5 app with a simple HttpClient request to obtain a single value from the backend. I'm binding the data received from the API service to the HTML. (using [(ngModel)] ). The response from the API is ~200ms. But the time it takes to show the data on the screen is ~3 seconds. I'm unsure if I'm going in the right direction with this. What are the possibilities why this is happening?

Answer 1

I had this same issue a while ago and these are the relevant things I found which helped me fix the issue.

1. A lot of event listeners were added to the DOM. In particular, I found those event listeners were added to the document, let's say 20 click listeners are added to the document, so every click anywhere in your applications will call all the 20 click handlers and will cause 20 changeDetection cycles for the whole app. (I had this issue because I was using one of the css packages: dropdown toggle from Bootstrap)

You can check for event listeners as shown in the image below.

2. You have a lot of components rendered in your application, for example, you have a list of 100 items and each item in the list is a component in itself. Now upon some browser event when a changeDetection cycle runs in the app, the whole app will be checked along with checking the changes in all the 100 rendered components. Depending on your need of the application If you have a lot of repeated component you can change the changeDetection strategy of the repeated component to onPush, this way at least all the input properties to the concerned component will not be checked if their references are not changed.

I Hope these two are useful for your application!