AngularJS - 为什么 ng-bind 比表达式快？答案

【问题标题】：AngularJS - Why is ng-bind faster than expressions?AngularJS - 为什么 ng-bind 比表达式快？
【发布时间】：2015-01-21 16:52:18
【问题描述】：

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

在我看来，两者都包含在$watch() 中，因此当$digest() 循环运行时，它会查看ng-bind 或{{}} 中的值是否发生了变化。

在性能方面，为什么 ng-bind 比 {{}} 更好，参考在哪里？

【问题讨论】：

标签： angularjs performance ng-bind

【解决方案1】：

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

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

对我来说，关于这个问题的accepted answer 是使用ng-bind 的一个更令人信服的理由，也就是说，您可以使用它来防止模板标签在 Angular 加载和编译之前出现可见的闪烁，而无需求助于像 ng 这样的黑客攻击-斗篷。

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

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

【讨论】：

感谢您的回答...阅读更多内容后，我现在可以理解您的回答了。但是，我不明白 Angular 如何在不先处理值的情况下查看值是否已更改...
或者您的意思是表达式 1) 评估值 2) 根据最后一个值检查值 3) 如果不同，则使用新值........并且使用 ng-bind 是 1) 使用新值
@dayuloli：表达式总是被评估，如果没有必要，这两种方法都不会改变 DOM。我稍微更新了我的答案以明确这一点。
感谢您的澄清，它确实有帮助！我将阅读更多关于 interpolate 的内容以真正完全理解它。谢谢！

【解决方案2】：

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

【讨论】：