CODEWITHSUNDEEP
javascriptperformanceangularjsdata-binding
danallison
danallison

Reputation: 48

Angularjs performance when binding to deeply nested object attributes

When data binding in Angularjs, is there a performance difference (significant or otherwise) between

<div>{{bar}}</div>

and

<div>{{foo.bar}}</div>?

What about <div>{{foo.bar.baz.qux}}</div>?

Context: I am on a team building a large Angularjs application that will potentially have a high volume of data flowing through it, and we would like to avoid the performance hit if there is one.

Upvotes: 1

Views: 490

Answers (1)

Konstantin Krass
Konstantin Krass

Reputation: 8646

As i know, the re-evaluation happens within a digest. Angular iterates through all values in the scope and checks, if the value has changed.

It doesn't look like deep nesting causes much pains there, cuz it's just checking agains the value used in the view. (as long as you dont place a watcher on this deep nested object)

But for some hints:

Don't use methods for conditions within the view: 

<span data-ng-hide="someFunction()"></span>

The function will be executed on each digest this may hurt.

Don't use watchers on top of a deep object structure: Will recursivly run through the whole thing for re-evaluation --> hurts

Use directives instead of {{}}:

Why? Example: angular-translate: If provides a filter and a directive for the same thing.

<span>{{'WELCOME'|translate}}</span>
<span data-translate="'WELCOME'"></span>

The filter will be re-evaluated on every digest, while the directive has a watcher on that passed value and only re-evaluates, if this code does actually change.

Use data-ng-if instead of ng-Show/Hide (And since the data-ng-if is available):

ng-Show/Hide just makes the DOM elements disappear by using display:none; with css. The hidden DOM elements will still be evaluated and the data changed, even if it's not visible.

ng-if will completely remove the DOM element, no re-evaluation for stuff within the ng-if

Upvotes: 2

Related Questions