11

this questionthis answer看来,使用表达式似乎会导致每次都从头开始计算值。但是我搜索了文档和教程,但没有找到该声明的参考。

在我看来,两者都包含在 a 中$watch(),因此当$digest()循环运行时,它将查看内部的值是否ng-bind{{}}更改。

在性能方面,为什么ng-bind{{}}建议的要好,参考在哪里?

4

2 回答 2

15

文档中并不总是提供此类详细信息 - 您必须阅读源代码。我看了一眼,似乎(截至 2014 年 11 月 24 日)它们都以非常相似的方式工作。两者都会导致实例化单个指令以在需要时更改值(卷曲插值指令是动态生成的)。

$digest这两个指令都像其他所有内容一样评估涉及的表达式。主要区别在于,虽然 ng-bind 不对值进行任何进一步的处理,但使用 curlies 时,会在每个摘要上重新计算整个内插文本。本质上,一个字符串是使用构建的$interpolate,并与之前的值进行比较(这发生在 的内部$digest)。如果值(带有 curlies 的普通值ng-bind或带有 curlies 的插值结果)没有改变,那么这两种方式都不会更新 DOM。

对我来说,关于这个问题的公认答案是一个更令人信服的使用理由ng-bind,即您可以使用它来防止模板标签在 Angular 加载和编译之前出现可见的闪烁,而无需求助于像 ng-cloak 这样的黑客。

根据变量的不同,也可能存在卷曲插值实际上性能更高的情况。我能想到的一种情况是,当使用 ng-bind 而不是插值时,您需要创建很多其他冗余<span>元素,这会使比例尺朝另一个方向倾斜。插值表达式还会导致为整个字符串创建单个观察者,而与您使用的变量数量无关,而 ng-bind 为每个实例创建一个观察者。

但与往常一样,不要过早优化性能,如果这样做,请分析以找出真正重要的部分。

于 2014-11-24T02:52:04.303 回答
1

ng-bind 和 {{}} 的主要区别在于 ng-bind 为传递给它的变量创建了一个监视程序(即上面示例中的名称),而花括号({{}})将(将整个表达式存储在memory ie } 在每个摘要循环中执行脏检查和刷新表达式,即使它不是必需的。ng-bind 仅在传递的值实际发生变化时才适用。有关更多详细信息,请参阅以下链接: http://www.ufthelp .com/2015/11/difference-between-and-ng-bind-in.html

于 2016-06-22T03:24:28.860 回答