AngularJS 'ng-filter' 在大约 1000 个元素的数组上非常慢 [英] AngularJS 'ng-filter' is very slow on array of ~1000 elements

问题描述

我为 AngularJS 中的项目名称列表设置了一个简单的 搜索过滤器.

我的列表如下所示:

var uniqueLists = {category1: ['item1', 'item2', 'item3' ... 'item180' ],//真实列表包含~180个项目category2: ['itemA', 'itemB', 'itemC' ... 'itemZZZ' ],//真实列表包含 ~1080 项category3: ['otheritem1', 'otheritem2', 'otheritem3' ]//真实列表包含 6 个项目}

我在 Angular 中遍历这个列表，并在

中打印出每个类别的结果.

<form ng-model="uniqueLists[index][0]"><input ng-model="searchFilter" type="text"/><ul><li ng-repeat="val 中的值| filter: searchFilter"><标签><input type="checkbox" ng-model="selectedData[key][value]"/>{{价值}}

</表单>

为清楚起见，selectedData 如下所示:

var selectedData = {category1: [item1:true], category2: [], category3: []);//如果 'item1 的复选框被选中.

这个列表工作得很好，尽管 filter 非常滞后，即使在我相当快的计算机上也是如此.在输入中输入一个字母需要 1-2 秒才能更新列表.

我知道这很可能是因为我一次过滤了大约 1000 个项目，但我没有在其他地方看到任何关于此的讨论.

有什么办法可以让过滤器发挥更好的性能?

解决方案

过滤器方法的主要问题是在每次更改时都会操纵 dom，因此变慢的不是过滤器而是后果.另一种方法是使用类似的东西:

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

在重复元素上.

借用@OverZealous 的一些代码，您可以使用以下内容来比较行为:

• 过滤器:http://jsbin.com/fuwadanu/1/
• ng-show: http://jsbin.com/xajehulo/1/

<小时>

更新:Angular v1.2 带来了track by 语法.这也有助于解决此类问题.如果元素有一些独特的属性，可以使用:

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

其中 item.id 在所有项目中必须是唯一的.使用 track by 只会删除那些不再在最终列表中的 dom 元素，其他元素将被记住.而如果没有 track by，整个列表每次都会重绘.简而言之:更少的 dom 操作 = 更快的重绘.

• 跟踪:http://jsbin.com/dufasego/1/

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
  }

I iterate through this list in Angular and print out the results in a <ul> for each category.

<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>

For clarity, selectedData looks like this:

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

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.

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?

解决方案

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"

on the repeated element.

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

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

---

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"

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.

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

这篇关于AngularJS 'ng-filter' 在大约 1000 个元素的数组上非常慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！