未定义的ng-bind比ng-bind和ng-show更昂贵吗？

Question

假设toShowVar我们未定义，哪个更贵？

<span ng-bind="toShowVar" ng-show="toShowVar"></span>

或

<span ng-bind="toShowVar"></span>

如果变量未定义，后者显然不会在屏幕上打印任何内容。

Answer 1

<span ng-bind="toShowVar" ng-show="toShowVar"></span>似乎更贵。因为toShowVar将被span绑定，即使其中没​​有任何内容。如果我们使用ng-if="toShowVar"，那将会很少昂贵，因为角度不包括这个span元素到DOM.So给它们降序

<span ng-bind="toShowVar" ng-show="toShowVar"></span>

<span ng-bind="toShowVar"></span>

<span ng-bind="toShowVar" ng-if="toShowVar"></span>

Answer 2

如果您使用ng-bind="toShowVar"，则ng-show="toShowVar"将毫无用处，因为如果ng-bind为{span，使用toShowVar就足以呈现undefined为空的内容{1}}。

因为ng-show="toShowVar"中的第二次无用的测试，因此使用它们会更加昂贵，因为它会再次检查toShowVar的值，然后尝试将类.ng-hide添加到元素。

但不同之处在于只有ng-bind时，范围将在包含空内容的页面中呈现，而使用ng-show会使用dispaly:none呈现它来自.ng-hide class。

Answer 3

为了解释这一点，首先ng-show和ng-bind都在同一priority级别运行。没有人赞成ng-show来提高绩效。

此处隐藏内容ng-show根本不需要。 ng-show也将开始观看相同的节目（此处toShowVar）并将在其注册的观察者上执行（通过添加ng-hide类将显示属性更改为无）。 要解释更多信息，如果您在进一步操作中使用ng-show='false'并将toShowVar更改为某些文本，并通过调试工具访问DOM，则可以检查更新的文本是否仍然可用。所以，显然ng-show不会在这里增加任何性能优势。 如果您使用ng-if（以更高优先级运行两者），它将从DOM中删除元素，并且在将其重新呈现给DOM之前，后续观察者将不会处于活动状态，因此即使是ng-if您正在运行额外的内容，因此它不会像ng-bind那样快，但会比ng-bind和ng-show更快。

注意：只有ng-bind和ng-bind ng-show在UI中有所不同，如果跨度对UI有一些影响（可能是内联，层次结构父级或任何），即使它是空的，也可以在UI中看到（像边框一样），否则，外观和感觉都是一样的。