问题 AngularJS - 为什么ng-bind比表达式更快?


这个问题 和 这个答案,似乎使用表达式会导致每次都从头开始评估值。但我搜索了文档和教程,但我没有找到这个声明的参考。

在我看来,两者都被包裹在一起 $watch() 等等 $digest() 循环运行它会看到里面的值 ng-bind 要么 {{}} 已经改变。

关于表现,为什么 ng-bind 比...更好 {{}} 正如所建议的那样,参考在哪里?


3959
2017-11-24 02:26


起源



答案:


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

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

给我的 接受了答案 关于这个问题是一个更有说服力的理由 ng-bind,即你可以使用它来防止在Angular加载和编译它们之前模板标签的可见闪光,而不是诉诸像ng-cloak这样的黑客。

根据变量,可能还存在实际卷曲插值的情况 更多 高性能。我能想到的一种情况是,当使用ng-bind而不是插值时,需要创建大量冗余 <span> 元素,并在另一个方向提示尺度。插值表达式还会导致为整个字符串创建单个观察程序,而与您使用的变量数量无关,而ng-bind则为每个实例创建一个观察程序。

但是和往常一样,不要尽早优化性能,如果你这样做,可以通过配置文件找出真正重要的部分。


14
2017-11-24 02:52



谢谢你的回答...在阅读了一下之后,我现在能理解你的答案。但是,我不理解Angular如何在没有先处理它的情况下更改值的情况... - dayuloli
或者你的意思是表达式1)评估值2)检查值与最后3)如果不同使用新值........并使用ng-bind它1)使用新值 - dayuloli
@dayuloli:表达式总是被评估,如果没有必要,它们都不会改变DOM。我稍微更新了我的答案,以明确说明。 - Matti Virkkunen
感谢您的澄清,它确实有所帮助!我将阅读有关插值的内容,以便完全理解它。谢谢! - dayuloli


答案:


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

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

给我的 接受了答案 关于这个问题是一个更有说服力的理由 ng-bind,即你可以使用它来防止在Angular加载和编译它们之前模板标签的可见闪光,而不是诉诸像ng-cloak这样的黑客。

根据变量,可能还存在实际卷曲插值的情况 更多 高性能。我能想到的一种情况是,当使用ng-bind而不是插值时,需要创建大量冗余 <span> 元素,并在另一个方向提示尺度。插值表达式还会导致为整个字符串创建单个观察程序,而与您使用的变量数量无关,而ng-bind则为每个实例创建一个观察程序。

但是和往常一样,不要尽早优化性能,如果你这样做,可以通过配置文件找出真正重要的部分。


14
2017-11-24 02:52



谢谢你的回答...在阅读了一下之后,我现在能理解你的答案。但是,我不理解Angular如何在没有先处理它的情况下更改值的情况... - dayuloli
或者你的意思是表达式1)评估值2)检查值与最后3)如果不同使用新值........并使用ng-bind它1)使用新值 - dayuloli
@dayuloli:表达式总是被评估,如果没有必要,它们都不会改变DOM。我稍微更新了我的答案,以明确说明。 - Matti Virkkunen
感谢您的澄清,它确实有所帮助!我将阅读有关插值的内容,以便完全理解它。谢谢! - dayuloli


ng-bind和{{}}之间的主要区别在于ng-bind为传递给它的变量创建了一个观察者(即上面例子中的名称),而大括号({{}})将(存储整个表达式)内存ie}执行脏检查并在每个摘要周期刷新表达式,即使它不是必需的。 ng-bind仅在传递的值实际发生变化时才适用。 更多详情请参考以下链接: http://www.ufthelp.com/2015/11/difference-between-and-ng-bind-in.html


1
2018-06-22 03:24