AngularJS绑定选项的性能

Question

我想知道下面的代码变体对性能的影响是复杂度.AngularJS已经解决了部分答案(那些使用属性):为什么ng-bind在角度上优于{{}}？但我想了解使用函数而不是属性的影响.

在我看来,当有一个变化时,Angular在某种意义上"知道"属性,而一个函数是不透明的,因此Angular不会知道,并且每次都必须进行评估.然而,根据上面提到的另一个SO问题,Angular已经在每次都使用直接模板进行评估.那么使用函数而不是属性真的会有任何性能损失吗？每种方法的优点和缺点是什么？

1直接模板与财产

<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 具有功能的直接模板

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

带有功能的 5 ng-bind-template

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

6 ng-bind with function

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

Answer 1

3）。ng-与属性绑定

让我们来看看。最好的选择是ng-bind='user.name'因为该指令只会监视分配的变量并更新视图，只有在它发生更改之后。

1）。使用属性直接模板化& 2)。具有属性的 ng-bind-template

这两个选项将在每个$digest周期刷新时触发。不需要 ng-bind 与表达式或仅表达式，无法通过检查特定值来提高速度。

4),5),6)

理论上，所有这些情况的速度都是相同的，但会比上面的例子慢得多。在每个 $digest 周期中，它将调用关联的函数，这使得它比表达式更慢。

在实践中检查它会在数量上降低多少速度仍然很有趣。