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条改善绩效的建议：

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

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

优化角度滤波器性能

1 个答案: