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?
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:
I have an HTML page with ng-repeat on a list which is will be filled when a promise will return.
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.
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