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

Question

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

在我看来，两者都包含在$watch()中，因此当$digest()周期运行时，它会看到ng-bind或{{}}中的值是否已更改。< / p>

关于效果，为什么ng-bind比{{}}更好，而且参考在哪里？

Answer 1

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

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

对我而言，accepted answer关于该问题是使用ng-bind的一个更有说服力的理由，即您可以使用它来防止模板标签在Angular加载和编译之前可见的闪烁，而无需求助像ng-cloak这样的黑客。

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

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

Answer 2

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