Angular Performance Improvement & Reducing CPU Usage Techniques

Angular Performance Improvement & Reducing CPU Usage Techniques

Folks ! after going in deep to improve my angular 4 application performance and to reduce its CPU consumption , I landed with the below points, which is nothing but the summary in nutshell.

   

   1)  Need to remove unnecessary components/DOM elements from the page

(Include child components/DOM elements only when its required)

Can see in the screen I am using the variable  addExtracomponents to include the components only when its required

   2) Releasing memory for subscribers, events, intervals.

Use: ng2-rx-collector, which auto release the memory after usage.

(Ref: https://www.npmjs.com/package/ng2-rx-collector)

   3)  Functions declared in *ngIf are called on every change detection cycle, angular checks the expression in the *ngIf for changes by calling the declared function multiple time.

One way to avoid is by putting a class variable in your function, which override the function manipulation every time , which is of course a performance boost.

*ngIf="isTrue" //(variable approach)

*ngIf="fun()"   //(function approach)

   4)  Using ngFor with trackBy , Since ngFor will continuously generates the DOM, the presence of trackBy would reduce the DOM manipulations, will be help to ngFor, it modifies a behaviors so that it compares new data to old based on the return value of the supplied trackBy function.

  Example:
     In .html (view):

            <ul>

                    <li *ngFor="let emp of empList; trackBy: trackByName" >

                   <span>Employee Name: {{ emp.name }}</span>

                    </li>

                  </ul>

              In .ts(component):

          // Treat the emp name as the unique identifier for the object

         trackByName(index, emp) {

            return emp.name;
          }

   5) Use the OnPush change detection strategy to tell Angular 2 there have been no changes. This lets you skip the entire change detection step on most of your application most of the time.

(Refer: https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/)

dashboard)

   6) Clearing the declared arrays/objects in ngOnDestroy (Other than Point#2)

         
  Example:
        public displayAttachments: RFIAttachments[]; //declared variable
            //declared interval

        this.f1();

        this.id = setInterval(() => {

              this.f1();

         }, 5000);

         ngOnDestroy() { //clearing all

              this.displayAttachments = null;

              if (this.id) {

                clearInterval(this.id);

              }

        }

   7) Need to analyze run time performance with my favorite chrome tool and apply a fix   where you find the cause.

Learn how to do that here: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

   8) If your using Angular KendoGrids which takes too more CPU usage when dataStateChange event is used, to avoid you can use Kendo Built in directive [kendoGridBinding] which take care of all the operations (filtering, sorting, paging) by itself with less CPU consumption, or else you can go with separate events for each operation

Example:

 <kendo-grid

     [kendoGridBinding]="gridData"
     [pageSize]="10"

     [pageable]="true"

     [sortable]="true"

     [filterable]="true"

            [groupable]="true"

            [height]="510">

            <kendo-grid-column field="CompanyName" [width]="140"></kendo-grid-column>

            <kendo-grid-column field="ContactName" [width]="120"></kendo-grid-column>

            <kendo-grid-column field="City" [width]="100"></kendo-grid-column>

            <kendo-grid-column field="ContactTitle" [width]="130"></kendo-grid-column>

        </kendo-grid>

   9)  Give deployment build with ng build --prod --build-optimizer

It will do the bundling, pre-compilations, removes the dead code and fast rendering with AoT (ahead of time).

Can read more info at: https://angular.io/guide/deployment

     https://angular.io/guide/aot-compiler

Its always better idea to take care of above points from the start of development , It may be difficult to apply all the above points to already developed application.

Thanks.