AngularJS - Why is ng-bind faster than expressions?

Question

From this question and this answer, it seems that using expressions will cause the value to be evaluated from scratch every time. But I've searched the documentation and tutorials, and I haven't found a reference for this statement.

In my mind, both are wrapped in a $watch() and so when the $digest() cycle runs it will see whether the value inside ng-bind or {{}} has changed.

On performance, why is ng-bind better than {{}} as has been suggested, and where's the reference?

Phenoxide

Answer 1

Details like this aren't always available in the documentation - you have to read the source. I took a peek and it seems that (as of 2014-11-24) they both work in a very similar way. Both cause a single directive to be instantiated to change the value when needed (the curly interpolation directive is generated on the fly).

Both directives evaluate the expressions involved on every $digest just like everything else. The main difference is that while ng-bind doesn't do any further processing on the value, with curlies, the entire interpolated text is recalculated on every digest. Essentially a string is built using $interpolate and that is compared with the previous value (this happens within the bowels of $digest). Neither way will update the DOM if the value (either the plain value with ng-bind or the interpolated result with curlies) hasn't changed.

To me the accepted answer on that question is a more compelling reason to use ng-bind, i.e. you can use it to prevent a visible flash of the template tags before Angular loads and compiles them, without resorting to hacks like ng-cloak.

Depending on variables there may also be cases where curly interpolation is actually more performant. One situation I can think of is when using ng-bind instead of interpolation requires you to create a lot of otherwise redundant <span> elements, and that tips the scales in the other direction. An interpolation expression also causes a single watcher to be created for the entire string independent of how many variables you use, as opposed to ng-bind which creates one watcher for each instance.

But as always, don't optimize for performance early, and if you do, profile to find out which part really matters.

Penetrate

Thanks for your answer...after reading a bit more I can understand your answer now. However, I don't understanding how Angular can see if a value has changed without processing it first... – Phenoxide

Or do you mean expression 1) evaluate the value 2) check the value against the last 3) if different use new value........and with ng-bind it's 1) use the new value – Phenoxide

@dayuloli: The expressions are always evaluated and neither way will change the DOM if there's no need to. I updated my answer slightly to make that clear. – Penetrate

Thanks for the clarification, it did help! I'll read about interpolate a bit more to really understand it fully. Thanks! – Phenoxide

Answer 2

The major difference between ng-bind and {{}} is that ng-bind creates a watcher for variable passed to it(i.e. name as in above example), while curly brackets({{}}) will (store the entire expression in memory i.e. }perform dirty-checking and refreshing the expression in every digest cycle even if it is not required. ng-bind will only apply when the value passed is changing actually. for more details refer below link: http://www.ufthelp.com/2015/11/difference-between-and-ng-bind-in.html

Kaiak