AngularJS - 为什么ng-bind比表达式更快？ [英] AngularJS - Why is ng-bind faster than expressions?

问题描述

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

From this question and this answer, it seems that using expressions will cause the value to be evaluated from scratch every time. But I've searched the documentation and tutorials, and I haven't found a reference for this statement.

在我看来，两者都包裹在一个 $ watch（），所以当$ code $ $ digest（）循环运行时，它会看到 ng - 或 {{}} 已更改。

In my mind, both are wrapped in a $watch() and so when the $digest() cycle runs it will see whether the value inside ng-bind or {{}} has changed.

，为什么 ng-bind 比 {{}} 更好，这是什么参考？ strong>

On performance, why is ng-bind better than {{}} as has been suggested, and where's the reference?

推荐答案

这样的细节在文档中并不总是可用 - 您必须阅读源代码。我看了看，似乎（截至2014-11-24），他们都以非常相似的方式工作。两者都导致一个单独的指令被实例化，以便在需要时更改值（卷积插补指令即时生成）。

Details like this aren't always available in the documentation - you have to read the source. I took a peek and it seems that (as of 2014-11-24) they both work in a very similar way. Both cause a single directive to be instantiated to change the value when needed (the curly interpolation directive is generated on the fly).

两个指令都会对每个 $ digest 就像其他的一样。主要区别在于，ng-bind不会对该值进行任何进一步的处理，通过curlies，每个摘要都会重新计算整个插入的文本。本质上是使用 $ interpolate ，并将其与先前的值进行比较（这发生在 $ digest 的肠内）。如果值（包含 ng-bind 的简单值或带curlies的内插结果）的值不会更新DOM。

Both directives evaluate the expressions involved on every $digest just like everything else. The main difference is that while ng-bind doesn't do any further processing on the value, with curlies, the entire interpolated text is recalculated on every digest. Essentially a string is built using $interpolate and that is compared with the previous value (this happens within the bowels of $digest). Neither way will update the DOM if the value (either the plain value with ng-bind or the interpolated result with curlies) hasn't changed.

对我来说，关于该问题的接受的答案是使用 ng-bind ，即您可以使用它来防止角度加载并编译之前模板标签的可见闪烁，而不会使用像ng-cloak这样的黑客。

To me the accepted answer on that question is a more compelling reason to use ng-bind, i.e. you can use it to prevent a visible flash of the template tags before Angular loads and compiles them, without resorting to hacks like ng-cloak.

根据变量的不同，还可能会出现卷曲内插实际上更为的性能。我可以想到的一个情况是，当使用ng-bind而不是插值时，需要创建大量其他冗余的< span> 元素，并提示在其他方向插入表达式还会导致为整个字符串创建单个观察器，而不管使用多少变量，而不是为每个实例创建一个观察器的ng-bind。

Depending on variables there may also be cases where curly interpolation is actually more performant. One situation I can think of is when using ng-bind instead of interpolation requires you to create a lot of otherwise redundant <span> elements, and that tips the scales in the other direction. An interpolation expression also causes a single watcher to be created for the entire string independent of how many variables you use, as opposed to ng-bind which creates one watcher for each instance.

但是一如以往，不要提前优化绩效，如果你这样做，请查看哪些部分真正重要。

But as always, don't optimize for performance early, and if you do, profile to find out which part really matters.

这篇关于AngularJS - 为什么ng-bind比表达式更快？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！