Performance issue on any event like button click, mouse over, typing in angular-7

[Ajit]

Hi All,

I am facing performance issue when click on any button/mouse hover/typing when page have more data.

Based on my analysis the issue is due to the 'change detection' by angular. 

I found as there are some place calling the function as I have to render different records and need dynamic values based on multiple parameters. So I am calling function from the template (.e.g ngClass)to evaluate the values based on parameter.

Due to angular change detection all the functions are getting called automatically and causing performance issue.

Now I use ChangeDetectionStrategy.OnPush which is not calling the autochangedetection always however change detection is getting called when button click/click anywhere /mouse hover/typing and again causing performance issue when the page having more data.

I am unable to use the expression as I have to do so many condition check to  evaluate the value, hence calling the function.

Again if I use a variable in the component and use ngOnChange event to populate then it will not have the dynamic values for each record and will not fulfill my requirement.

Can any one please guide on how to resolve this performance issue. 

Thanks in Advance,

Ajit

[Sander Elias]

Hi Ajit,

It sound like you are doing too much logic inside the template. Move most, if not all of the logic to the controller and it will get better. 
Also, are you also sure you need to all your choices on a mouseClick? perhaps refactor your app so, that it only "recalculates" when data-changes occur.

Regards

Sander

[Ajit]

Thank you Sander for your response.

One example of my schenario is:

Template calling function(e.g. [ngClass] = "getClass(parameter1, parameter2)") which resides in the component class. I am unable to make this without callinga function as I have multiple rows and each row css class wouold be different based on the row data. This is one example and like this there ae many.

I am trying to avoid refactoring as I have to do for the whole application and it would be lot of effort required and again the whole app need to be retested. 

Hence I am trying to see is there any alternate approach available to improve the performance. 

Again the application is fully developed and I am the new one to the application. So to refactor I need to understand the whole application which will take time.

Thanks,

Ajit Dash

[Ajit]

Any help or suggestion on this?

[Sander Elias]

Ajit,

I can repeat my previous reply. Using functions in templates is an antipattern in Angular, and should be a last-stop solution. Each of those functions is called numerous times. This will cause a performance hit. What you can do is some memorization in the functions itself.
A better solution would be adding the needed data to the rows itself.
In cases like this I usually so something in my controller like this:

rows.forEach(row=>row[className]=calculate(...))

and use the className in the template. This will only run once when the data comes in. after that, it is a simple lookup in the template.

regards,

Sander

[ajit dash]

Thank you so much Sander,

Agreed, I will try your approach.

Thanks,

Ajit

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/df539074-0cc8-4510-aea9-9bf8183394bfo%40googlegroups.com.

[maninder singh Kumar]

Performance is a matter of leaner code

Maninder Kumar about.me/maninder.s.kumar

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/CAGSnwRd0zm6NDim6uNoCV4OWfgtyb0Wk1wfo5TvSp9wDd_9_VQ%40mail.gmail.com.