AngularJS绑定选项的性能表现

Question

我想了解下面代码变化在复杂性不断增加时的性能影响。其中一部分答案（使用属性）已经在AngularJS : Why ng-bind is better than {{}} in angular?中得到解决，但我想了解使用函数而非属性的影响。

对于使用属性，似乎Angular在某种程度上“知道”何时发生更改，而函数是不透明的，因此Angular不会知道，并且必须每次进行评估。然而，根据上述SO问题，Angular无论如何都会进行直接模板化的评估。那么相比属性，使用函数是否真的会有性能损失？它们各自的优缺点是什么？

1.使用属性的直接模板

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

2 ng-bind-template 与属性一起使用

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

使用属性的3 ng-bind

<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

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

- Michael Sorens

---

额外的函数调用意味着额外的开销。除非是基于事件的，否则您永远不想在视图中使用触发异步请求的函数...尽管让我们尝试一下。 - charlietfl

我认为你已经回答了大部分重要的问题。我的意思是，我认为你不应该为这样的事情使用函数，这是一种不必要的开销。当绑定来自视图时，应该使用函数，而当绑定来自模型时，则应该使用属性。 - lenilsondc

@LenilsondeCastro：你是说“...函数应该在绑定来自_controller_时使用吗？ - Michael Sorens

不，我的意思是来自视图的事件绑定通常必须在$scope上可见。函数不应该被用作getter，这就是我的意思。因为在作用域中有一个不可预测的成员，它总是会在digest周期中被评估，这会增加开销。你不这么认为吗？ - lenilsondc

Answer 1

3). 使用属性的ng-bind

让我们来看看。最好的选择是ng-bind='user.name'，因为这个指令只会观察分配的变量并在变量更改后更新视图。

1). 直接使用属性进行模板化 & 2). 使用属性的ng-bind-template

这两个选项将在每个$digest循环刷新时触发。不需要使用表达式或只是表达式的ng-bind，无法通过检查特定值来增加速度。

4),5),6)

从理论上讲，所有这些情况的速度都将相同，比上面的示例要慢得多。在每个$digest循环中，它将调用相关联的函数，这使得它甚至比仅使用表达式还要慢。

在实践中，检查它将减少多少速度仍然是有趣的。

- Mikki Kobvel