AngularJS绑定选项的性能

Performance of AngularJS binding options

本文关键字：性能 选项 绑定 AngularJS      更新时间：2023-09-26

我想知道随着复杂度的增加，下面的代码变化对性能的影响。这个问题的部分答案(那些使用属性的)已经在AngularJS中得到了解决:为什么ng-bind在angular中比{{}}更好?但是我想了解使用函数而不是属性的影响。

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

直接模板属性 
<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 with function

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

6 ng-bind with function

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

3)。

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

1)。直接模板属性 &2). ng-bind-template with property

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

4), 5)、6)

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

在实践中检查它将在数字上降低多少速度仍然是有趣的。
相关文章：