CODEWITHSUNDEEP
angularprofiling
Fel
Fel

Reputation: 4818

Angular 5 app slowness

I'm trying to profile an Angular 5 application to find the reason of its poor performance when it loads some objects. I'll explain it better: the application loads a grid where each cell is a container of objects. The user is able to drag an object from a tree on the sidebar to the grid, so each of the cells listens to 3 events (their names come from the UI library we're using):

Also, to do some other actions, like finding an object through all the cells, each of them has 3 subscriptions to be aware when the users selects an object (for cut/paste operations), when we want to find an object and when the user loads another grid of data.

The average object grid has around 100 cells. Is it too much for Angular to handle all these events and subscriptions? I have a grid with 60 cells and trying to type anythiing on a form takes an eternity.

For example, to type 'Sample' in this form:

The form

The app stood still for almost 10 seconds, and then typed all the letters in the word. Trying to increase the app performance, all the cell components use the OnPush change detection strategy. I've tried to profile the application with Google developer tools, and here is the result of writing 'Sample' in the input field:

Chrome profiler output

I thought that it would gave me some clues of the poor performance, but, based on the results, I can't figure out the reason.

Is there any more precise tool to examine what the application is doing to profile it?

I appreciate any suggestion, thanks!

Upvotes: 2

Views: 505

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71911

The problem is that the events coming from your UILibrary are not running inside the ngZone and this is causing the change detection not to be triggered. You should inject the ngZone in your component where you use the library, and then call the run function:

constructor(readonly ngZone: NgZone) {}

onDragEnter(event: Event): void {
  this.ngZone.run(() => {
   // do here what ever you need to be changed
  }); 
}

Upvotes: 1

Related Questions