8

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>
Improve this question
4
  • 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 Commented Oct 7, 2016 at 18:18
  • 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. Commented Oct 7, 2016 at 18:24
  • @LenilsondeCastro: Do you mean "...functions should be used when the bind comes from the controller? Commented Oct 7, 2016 at 19:13
  • 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? Commented Oct 8, 2016 at 1:52

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.