Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Performance of AngularJS binding options

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>
like image 433
Michael Sorens Avatar asked Oct 07 '16 17:10

Michael Sorens


1 Answers

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.

like image 161
Mikki Kobvel Avatar answered Oct 12 '22 03:10

Mikki Kobvel