AngularJS在root上的ng-class与多个ng-if之间的性能比较

Question

如果我需要在一个DOM父级中的多个位置使用相同的条件，最好使用CSS和ng-class（显示：无）或使用多个ng-if来控制它（从中移除元素） DOM，但增加了更多的观察者）？

选项1.多个ng-ifs：

<div ng-repeat="item in items track by item.id">
    <p ng-if="item.active">Show some active info</p>
    <p>Some general info</p>
    <ul>
        <li ng-if="item.active">Some bullet with active info</li>
        <li>Some bullet with active info</li>
        <li ng-if="item.active">Some bullet with active info</li>
    </ul>
</div>

选项2.单ng-class：

<div ng-repeat="item in items track by item.id" ng-class="{'active': item.active}>
    <p class="if-active">Show some active info</p>
    <p>Some general info</p>
    <ul>
        <li class="if-active">Some bullet with active info</li>
        <li>Some bullet with active info</li>
        <li class="if-active">Some bullet with active info</li>
    </ul>
</div>

与CSS一起

.if-active {
    display: none;
}

.active .if-active {
    display: default;
}

问题

忽略上述人为的例子并假设（1）ng-repeat迭代数百个条目和（2）active属性的一次性绑定是不可能的，它是否通常最好使用ng-ifs添加更多观察者，还是在CSS渲染上添加更多工作？

我还没有看到我所遇到的任何AngularJS优化指南中讨论的这种模式（可能因为它太明显了）。

Answer 1

每个ngIf指令都会在摘要周期中添加一个观察程序，因此会占用更多内存。

现在我不知道您的item.active属性是否在应用程序的生命周期中发生了变化，但如果不是，您可以制作一个指令ifActive，该指令在DOM之后有效地从DOM树中删除该元素。单一检查。

另一方面，“数以千计的条目”可能会破坏你的内存使用量。我建议你看看使用虚拟滚动的“智能”ngRepeat替代品。