Multiple appearance of "recalculate style" causes slow loading


#1

Hello,
I have a page with about 150 rows.
Each row currently has only 1 watcher.
However, I do use one time binding a lot in every row.
I noticed that the loading time is very slow, especially on mobile, and there is one main reason for it -
I attached below a screenshot of chrome’s dev timeline tool.
What you see goes on and on for hundreds of times (recalculate, cancel, recalculate, cancel,…), and it takes most of the loading time.
I noticed that if I remove some ng-if’s and ng-classes it improves, but I’m still not sure why it happens and how to completely fix it.
Can you please advise and help minimize the loading time?

Thank you

Screenshot:


#2

Can you provide a working example?


#3

Hi
I’m the OP, switched users.

I can’t provide a working example since my app is quite complicated, but I can explain what I’m doing and point to a possible bottleneck:

  1. I have an HTML page with ng-repeat on a list which is will be filled when a promise will return.
  2. I have a loading spinner that waits for the promise to return. When it does, I fill the list and let ng-repeat draws it.
  3. The ng-repeat is showing a directive I wrote myself, and is wrapped by ng-controller. The controller does some calculations and then changes the design of the directive (the HTML of the directive is using on time binding to the $scope of that controller to determine its design.

I think that if I’ll make sure the list is ready BEFORE the HTML page is loaded, it might save some time and will prevent a repetition what I’ve shown above.
What do you think?
Does this info help?
Thank you