CODEWITHSUNDEEP
angular
Ka Tech
Ka Tech

Reputation: 9457

Angular 9 - Component Inputs and Outputs Performance tuning

I am using Angular 9 where in my app I have built a table. Each table cell is its own component. There are about 10 cells per row.

The cell component looks similar to this:

<cell
      [name]="obj.name"
      [field1]="obj.field1"
      [field2]="obj.field2"
      [field3]="obj.field3"
      [field4]="obj.field4"
      [field5]="obj.field5"
      [field6]="obj.field6"
      [field7]="obj.field7"
      [field8]="obj.field8"
      [field9]="obj.field9"
      [field10]="obj.field10"
      (onEvent1)="someFn1()"
      (onEvent2)="someFn1()"
      (onEvent3)="someFn1()"
      (onEvent4)="someFn1()"
     ></cell>

The current issue is if there are many rows in the table ie more than 25 it can be slow to load and sluggish to interact. I've setup ChangeDetectionStrategy.OnPush strategy which has improved performance. I am trying to find other things that may impact and have the following questions:

  1. If there are many inputs for the component with onpush strategy, can this impact the performance? If say in above example I pass the obj instead of each individual field, should I see an improvement?

  2. Can having many outputs (onEvent1) impact the performance?

  3. If the cell component.ts has alot of typescript codes (ie specific functions), will this cause slow loading time or this only dependant on the html template only? Is better moving this code to a service instead?

I appreciate people's input on this as so far most articles talk about onPush strategy and doesn't discuss the above.

Upvotes: 1

Views: 708

Answers (1)

Asaf
Asaf

Reputation: 1564

I've created 2 tests for your different scenarios (one fat component vs small one), I've checked the time between the constructor that create the content and AfterViewInit and the results are:

  1. Average 120 milliseconds for the large component (this is the one with many inputs/outputs)
  2. Average 70 milliseconds for the small component (on the small component I've create all the content on field1 so actually all the same data is transferred in both tests)

In the links above I've created 2 stackblitz so you can see the difference.

Upvotes: 1

Related Questions