Angular 1 way binding not affecting performance

Question

I am working on a project which relies heavily on angular for frontend task. On a listing page which displays around 50 enteries with ng-repeat and each entry has alot of watchers so i decided to reduce the # of watchers with angular's static binding and was able to reduce the nos. from 12k watchers to 8k watchers but even after this much decrease in watchers, there is no improvement in loading time, dom rendering or digest cycle time. The digest cyle takes almost the same or a little more time with 8k watchers as it does with 12k watchers so it seems that angular's 1-time binding isn't helping here. I have used chrome's angular extension batarang and a library ng-stats. The questions i have in mind are :
1) Why static binding/1-way binding not increasing the performance here ?
2) Decreasing the no. of watchers should decrease the digest cycle and speed up the content loading time ?
3) Any other tip to speed up things in this case? ( besides the asset minification ).

8k watchers? 8000? Those are a lot of watchers. There is something wrong with the design. What is your page loading time? — RahulB
– RahulB, Commented Apr 21, 2016 at 11:16
Instead of having click listeners for each item in the list, you can reduce the listeners by having 1 listener for the 'parent' and identifying the clicked list item through event.target. Check this link for reference: kirupa.com/html5/handling_events_for_many_elements.htm — Adarsh Konchady
– Adarsh Konchady, Commented Apr 21, 2016 at 11:31
your initial watchers still at 12k with one time binding, but when you see it in batarang or ng-stats, those 4k are gone by the time those stats gathered, so, you won't get performance benefits from that. — YOU
– YOU, Commented Apr 21, 2016 at 11:34
@YOU batarang stats are confusing but ng-stats are better. Actually ng-stats shows are graph constantly updating so all the time it remains at 8k. — Abdul Mannan - Data Engineer
– Abdul Mannan - Data Engineer, Commented Apr 21, 2016 at 12:17

Walfrat · Accepted Answer · 2016-04-21 11:30:28Z

0

If you decrease the number of watcher of 4k. It's just 4k check less to perform. If you can consider that they're simple string value, 4 000 string comparaison less is nothing.

About ng-repeat performance : you should use track by if you did not use it. Track by allow you to specify the unique key of your list that angular should check to detect changes.

If you have a loot of data, be really carefull about what you put in the $scope, angular will watch everything stored in the scope, if you don't need some of them (like some huge list in memory), you should not store them into $scope. Of course if you use controllerAs syntax this mean that you shouldn't put them into this

You probably have some bottleneck in your application, you should first focus on finding them.

A naïve approach of doing that is just to comment/Remove some part of your view and check what happens.

Another tip : do you have some code that look like :

$http().then(function(){
   $http().then(function(){})
});

If so check if you really need this or if you can load them separately. If you need to perform multiple request and wait for all result to perform a grouped process use $q.all([arrayOfPromise]).then(function([arrayOfResults]){})

answered Apr 21, 2016 at 11:30

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdul Mannan - Data Engineer Over a year ago

i do use track by. I don't have chained promise on $http and all data is loaded at the start of the app with service.

Collectives™ on Stack Overflow

Angular 1 way binding not affecting performance

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related