Angular link once to track performance

Question

I have an ng-repeat directive with some filters on it and a massive DOM inside each iteration. For instance:

<ul> <li ng-repeat='task in tasks'> <!--Some DOM with many bindings--> </li> </ul> 

I want to improve performance a bit, but I want to keep two-way snapping. One way to do this is to insert a track:

 ng-repeat='task in tasks track by task.id' 

Another way is to use native bind once in the bindings:

 {{::task.name}} 

Obviously, I cannot use both of them, because in this case, two-way binding will not work. How can I measure the recovery speed of the DOM? Which method is more effective?

Answer 1

These are not mutually exclusive designs, and both have different uses.

Using track by simply allows Angular to better control the DOM when adding or removing elements . By default, it uses a hash of the entire object, which can be slow and inefficient compared to a simple atomic value.

Using the single-binding syntax, however, simply reduces the number of total hours in the application. This makes the application more responsive when performing updates because it has fewer things to view.

Answer 2

Great question.

Answer: it depends, but basically one binding time is the best option if your application is very small.

Why? Because if your application is medium or large, you will have a problem with the clock. If you put the number of hours on more than 2000, your application will feel sluggish on less powerful devices, no matter what you do. The clock will slow down your application all the time. On each cycle a digest. Therefore, your main concern for performance should be to keep the clock counting. And most obviously, removing the clock from the material inside ng-repeat helps.

On the other hand, the track will speed up the updating of the table a little, but this is an optimization that you should undertake only if you know that your application will remain small (below 2000 hours)