过滤器性能与 ng 重复与多个 ng 显示内部

Filter performance with ng-repeat with multiple ng-show inside

本文关键字：ng 显示 内部 性能 过滤器      更新时间：2023-09-26

我有一个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. 显示性能问题
  2. 没有 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。

相关文章：