我有一个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 显示
我知道您可以通过"跟踪"来提高性能(这是一个关于它的主题),但看起来这还不足以使过滤器"平滑"(至少不会太滞后)。
有没有办法提高具有多个ng-show条件和大型数据源的ng-repeat的过滤器性能?
性能调优实际上取决于您面临的一些约束。以下是一些建议:
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。