优化角度滤波器的性能

Question

我正在过滤一个相当小的数据集，但是仍然存在一些性能问题（当过滤器不够简洁时，UI线程冻结）。

    <input type="text" ng-model="vm.user" />
    <table class="tbl" ng-show="vm.user.length > 2">
        <tbody ng-repeat="p in vm.permissions | filter: {UserName: vm.user}:false">

问题仅在于有很多记录时，因此我尝试通过在搜索中输入少于3个字符时隐藏整个内容来提高性能。

不幸的是，即使隐藏了数据集，它似乎仍然在操纵dom（在我键入过滤器时，UI冻结）。

当字符较少时，是否有办法使其不做任何事情，和/或以其他方式提高性能？

Answer 1

我将提出3条建议来提高性能：

1. 正如New Dev所说，使用ng-if而不是ng-show从DOM中删除整个节点，这意味着在已删除的节点上根本不会进行任何指令处理。 我现在倾向于在99％的场景中使用ng-if ，除非我知道该选项的可见性会切换很多，因此修改现有节点的类比一遍又一遍地插入和删除同一节点要快。
2. 在ng-repeat表达式中使用track by 。 这意味着Angular将对数组中具有相同匹配值的项目重复使用DOM节点。 例如，如果您track by p.UserName （只要UserName是100％唯一的），则如果它遇到一条具有相同用户名的记录，它将使用与以前相同的DOM节点，而不是重新创建一个新的DOM节点。
3. 使用ng-model-options对过滤器输入进行反跳操作 ，以便如果用户快速键入内容，则并非每次击键都会触发新的过滤操作。 您可能需要尝试在目标浏览器中找到适合您的正确超时值。

我创建了一个示例Plunkr ，它展示了这些技术的实际应用。 当我尝试使用“权限”列表中的100,000条记录（示例中仅是虚拟用户）时，它在Chrome中仍然非常快。 但是，没有在其他浏览器中进行测试。