使用带有多个 ng-show 的 ng-repeat 过滤性能

Question

我有一个 ng-repeat，里面有多个 ng-show 条件。像这样的东西（虚构的例子）：

<ul>
  <li ng-repeat="item in items | filter:searchFilter" >
    <label ng-show="item.label==1">{{item.label}}</label>
    <label ng-show="item.label==2">{{item.label}}</label>
    <label ng-show="item.label==3">{{item.label}}</label>
    <label ng-show="item.label==4">{{item.label}}</label>
    <label ng-show="item.label==5">{{item.label}}</label>
    <label ng-show="item.label==1">{{item.label}}</label>
    <label ng-show="item.label==2">{{item.label}}</label>
    <label ng-show="item.label==1">{{item.label}}</label>
  </li>
</ul>

我正在使用 ng-show 进行格式化，例如：

我想在 item.cellphone 不为空时显示手机列...

我有一个大数据源（+1000 行），并且在使用过滤器时发现了性能问题。

如果我去掉大部分 ng-show 条件，性能还是不错的。这是一个活生生的例子：

1. Ng-show performance problem
2. Without ng-show

我知道您可以使用“track by”(here's an topic about it) 来提高性能，但看起来它不足以使过滤器“平滑”（至少，不会太迟钝）。

有没有办法提高具有多个 ng-show 条件和大数据源的 ng-repeat 的过滤性能？

Answer 1

性能调优实际上取决于您面临的一些限制。以下是一些建议：

1) 您真的需要显示/隐藏标签，还是根本不创建它们就足够了？如果它们不需要存在，请使用ng-if 而不是ng-show。这将大大减少示例中观察者的数量以及 DOM 元素的数量。

2) 如果您可以使用 Angular 1.3+ 并且可以假设标签是静态 id，请使用一次性绑定以避免有这么多的观察者{{::label}}

使用这些建议修改您的示例会导致：http://jsbin.com/madefuqami/2/edit

但是，最终，如果您继续添加元素，那么在某些时候您的应用程序会变慢。 Angular 的脏检查器将在每个 $digest 循环中查看每个 ng-show（或 ng-if）和 {{}} 绑定。此外，DOM 会变得不必要地大 - 当您的屏幕上只有 1-50 个元素时，您很有可能不需要浏览器来完成与维护 HTML 和元素 3000 样式相关的所有工作。

更强大的解决方案是研究分页或虚拟化。这可以在服务器端完成，也可以在 Javascript 中完成。

我建议使用服务器端分页。最终，它将更好地扩展并提供更清洁的解决方案。但是，如果您决定采用 Javascript 虚拟化路线，那么已经有一些库可用，例如 angular-virtual-scroll