Performance of AngularJS binding options

Question

I am wondering about the performance impact of the code variations below as complexity scales. Part of the answer to this (those using properties) has already been addressed in AngularJS : Why ng-bind is better than {{}} in angular? but I would like to understand the impact of using functions instead of properties.

It would seem to me that with properties Angular "knows" in a sense when there is a change, while a function is opaque so Angular would not know, and would have to evaluate every time. Yet, according to the other SO question mentioned above, Angular is already evaluating every time with direct templating anyway. So is there really any performance penalty for using a function instead of a property? And what are the pros and cons of each of these?

1 Direct templating with property

<div>Hello, {{user.name}}</div>

2 ng-bind-template with property

<div ng-bind-template="Hello, {{user.name}}"</div>

3 ng-bind with property

<div>Hello, <span ng-bind="user.name"></span></div>

4 Direct templating with function

<div>Hello, {{GetUserName()}}</div>

5 ng-bind-template with function

<div ng-bind-template="Hello, {{GetUserName()}}"</div>

6 ng-bind with function

<div>Hello, <span ng-bind="GetUserName()"></span></div>

Roussel

Extra function calls mean extra overhead. Also you never want to use a function in view that triggers an async request unless it is event based...lots try it though – Gander

Well I think you have already answered most of the important questions. I mean, I think you shouldn't use functions for such thing, it is an unecessary overhead. Function should be used when the bind comes from the view and properties when the bind comes from the model. – Orville

@LenilsondeCastro: Do you mean "...functions should be used when the bind comes from the controller? – Roussel

No, I mean the bind of events in general that comes from the view and must be visible on $scope. A function shouldn't be used as a getter, that's what I mean. Because of the overhead of having an unpredictable member in the scope that always will bem evaluated in the digest cycle. Don't you think? – Orville

Answer 1

3). ng-bind with property

Let's see. The best choice is ng-bind='user.name' because this directive just will just watch to the assigned variable and update the view, only after it will be changed.

1). Direct templating with property & 2). ng-bind-template with property

These two options will be triggering on the every $digest cycle refreshing. Not necessary ng-bind with expression or just expression, no way to increase speed by checking particular value.

4),5),6)

Theoretically, all these cases will be the same speed which will be much slower than above examples. On every $digest cycle, it will invoke associated function, what makes that even slower than just expression.

It is still interesting on practice to check how much it will reduce speed in numbers.

Gangland