AngularJS'NG过滤“是〜1000个元素的数组很慢 [英] AngularJS 'ng-filter' is very slow on array of ~1000 elements

问题描述

我有一个简单的＆LT;输入方式＆gt; 搜索过滤器设置为itemNames的名单中 AngularJS

I have a simple <input> search filter set up for a list of itemnames in AngularJS.

我的名单看起来是这样的：

My list looks like this:

var uniqueLists = {
    category1: ['item1', 'item2', 'item3' ... 'item180' ], // Real list contains ~180 items
    category2: ['itemA', 'itemB', 'itemC' ... 'itemZZZ' ], // Real list contains ~1080 items
    category3: ['otheritem1', 'otheritem2', 'otheritem3' ]  // Real list contains 6 items
  }

我通过这个列表迭代角并打印出结果在＆LT; UL＆GT; 为每个类别

<div ng-repeat="(key,val) in uniqueLists">
    <form ng-model="uniqueLists[index][0]">
        <input ng-model="searchFilter" type="text" />
            <ul>
                <li ng-repeat="value in val | filter: searchFilter">
                    <label>
                         <input type="checkbox" ng-model="selectedData[key][value]" />
                        {{value}}
                    </label>
                </li>
            </ul>
    </form>
</div>

为了清楚起见，selectedData看起来是这样的：

For clarity, selectedData looks like this:

var selectedData = {category1: [item1:true], category2: [], category3: []); // if 'item1's checkbox is checked.

这个清单工作得很好，虽然过滤器是相当laggy，连我挺快的计算机上。键入一个字母到输入需要1-2秒的名单进行更新。

This list is working just fine, although the filter is quite laggy, even on my quite-fast computer. Typing a letter into the input takes 1-2 seconds for the list to update.

我知道，这可能是因为我在同一时间通过过滤周围约1000个项目，但我还没有见过这样的讨论在其他地方。

I'm aware that this is likely because I'm filtering through around about 1000 items at a time, but I haven't seen any discussion of this elsewhere.

有没有办法得到更好的表现出来的过滤器？

Is there any way to get better performance out of the filter?

推荐答案

与过滤方法的主要问题是，在每次改变DOM被操纵，所以它不是很慢，但后果的过滤器。另一种方法是使用这样的：

The main problem with the filter approach is that upon each change the dom is manipulated, so it's not the filter that's slow but the consequences. An alternative is to use something like:

ng-show="([item] | filter:searchFilter).length > 0"

重复的元素。

转贷@OverZealous一些code，可以使用以下方法来进行比较的行为：

Lending some code from @OverZealous, you can use the following to compare the behaviour:

• 过滤器： http://jsbin.com/fuwadanu/1/


• NG-显示： http://jsbin.com/xajehulo/1/

• filter: http://jsbin.com/fuwadanu/1/
• ng-show: http://jsbin.com/xajehulo/1/

更新：具有角V1.2附带的轨道由语法。这也有助于这些问题。提供的元素有一些独特的属性，可以使用：

Update: With Angular v1.2 came the track by syntax. Which also helps with such problems. Provided the elements have some unique attribute, one can use:

ng-repeat="item in items | filter:searchFilter track by item.id"

其中， item.id 必须跨越所有项目唯一的。随着按轨道只有那些以DOM元素将被删除，这已经不再是在最后的名单，别人会的记住的。而由没有轨道，整个名单的重绘的每次。总之：更少的DOM操作=更快重绘

Where item.id has to be unique across all items. With track by only those dom-elements will be removed which are no longer the in the final list, others will be remembered. Whereas without track by the whole list is redrawn everytime. In short: much less dom manipulation = quicker redraw.

• 按部就班地进行： http://jsbin.com/dufasego/1/

• track by: http://jsbin.com/dufasego/1/

这篇关于AngularJS'NG过滤“是〜1000个元素的数组很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！