优化 angularjs 搜索过滤器答案

【问题标题】：optimize angularjs search filter优化 angularjs 搜索过滤器
【发布时间】：2014-10-12 03:45:52
【问题描述】：

页面中有近 2000 行。我使用 AngularJS 过滤器来搜索一些包含输入字符串的项目。问题是在输入控件中键入一个字符时效率很差。你们有好的想法如何改进这个过滤器吗？这是搜索代码：

输入框：

<input class="searchText ng-cloak" ng-model="searchText.ValueName" placeholder="Search Value" />

在表格的 ng-repeat 中：

<tr ng-repeat="registry in currentSettings | filter:searchText" ....

字符串filter:searchText用于过滤。

【问题讨论】：

【解决方案1】：

瓶颈可能是在DOM 中添加和删除元素。通过使用 css 隐藏元素来避免这种情况。使用 ng-show 代替过滤 ng-repeat：

<li ng-repeat="registry in currentSettings" ng-show="([registry] | filter:searchText).length > 0">

还有virtual ng-repeat plugin，它只添加要渲染的dom节点以获得更好的性能

【讨论】：

【解决方案2】：

我还建议在转发器中使用track by。它将防止不必要的元素移除和重新插入，并在某些情况下显着提高速度。只需确保您通过一些独特的属性进行跟踪。

【讨论】：