Angular bind once vs. track by performance

Question

I've got a ng-repeat directive with some filters on it and massive DOM inside each repetition. For example:

<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 binding. One way to do it is to insert track by:

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

The other way is to use native bind once in bindings:

{{::task.name}}

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

Answer 1

These are not mutually exclusive constructs and both have different uses.

Using track by simply allows Angular to better manage the DOM when items are added or removed. By default, it uses a hash of the entire object, which can be slow and inefficient compared to a simple atomic value.

Using one time binding syntax however simply reduces the number of total watches in the application. This makes the app more responsive when performing updates because it has less things to watch.