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条件，表现都很好。这是现场的例子：

Ng-show performance problem
Without ng-show

我知道你可以通过“追踪”（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的脏检查器将在每个ng-show周期中查看这些ng-if（或{{}}）和$digest绑定中的每一个。此外，DOM将变得不必要地大 - 当您的屏幕上只有1-50适合时，您很可能不需要浏览器完成与维护元素3000的HTML和样式相关的所有工作。

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

我建议服务器端分页。最终，它将更好地扩展，并提供更清洁的解决方案。但是，如果您决定使用Javascript虚拟化路由，则可以使用诸如angular-virtual-scroll

之类的库

使用ng-repeat过滤性能，内部有多个ng-show

1 个答案: