Angularjs 对大型列表重复执行性能调整

Angularjs 对大型列表重复执行性能调整,angularjs,angularjs-directive,angularjs-ng-repeat,ng-repeat,Angularjs,Angularjs Directive,Angularjs Ng Repeat,Ng Repeat,我编写了一个angularjs指令,其作用类似于表单选择组件。它有一个搜索字段来搜索选项。当您单击某个选项时,它会从选项列表中删除该选项,并将其显示在搜索字段上方作为一个选项。单击某个选择时,它会将其从搜索字段上方的选择中删除,并将其放回选择列表中 我已经做了很多关于ng repeat的研究,以及它潜在的性能问题,我已经看到了。在我当前的迭代中,我使用bindonce、limito和trackby以及一个无限卷轴。在我的笔记本电脑上,这个指令非常快,在iPhone5上,仍然非常快,在iPhone

我编写了一个angularjs指令,其作用类似于表单选择组件。它有一个搜索字段来搜索选项。当您单击某个选项时,它会从选项列表中删除该选项,并将其显示在搜索字段上方作为一个选项。单击某个选择时,它会将其从搜索字段上方的选择中删除,并将其放回选择列表中

我已经做了很多关于ng repeat的研究,以及它潜在的性能问题,我已经看到了。在我当前的迭代中,我使用bindonce、limito和trackby以及一个无限卷轴。在我的笔记本电脑上,这个指令非常快,在iPhone5上,仍然非常快,在iPhone4上非常快,在iPhone3上非常垃圾。在iPhone3上,文本搜索过滤选项的速度很快,但选择选项的速度很慢

以下是我用于选择的ng repeat:

<a bindonce refresh-on="'refreshSelect'" ng-repeat="choice in choices | filter:{name: searchFilter.name, selected: false}:strict | orderBy:'name' | limitTo: limitNumberOfChoices track by choice.id" ng-click="addToSelections(choice)">
    <div class="well well-sm" style="margin-bottom:10px;">
        <strong>
            <span bo-bind="choice.name"></span> 
            <span class="badge" ng-show="choice.badgeValue" bo-bind="choice.badgeValue"></span>
        </strong>
    </div>
</a>

选项位于输入字段下方。选择位于输入字段上方。您可以滚动选择。当您将选项列表向下滚动75%时,infiniteScroll将启动。这将增加50到限制在ng重复。选择数组的大小为10000项

我需要关于如何加快这个指令的建议。不幸的是,我们有大量的iPhone3,摆脱它们不是一个选择。我可能正在做一件非常简单的事情,那就是放慢速度

提前谢谢

沃伦

更新
我取下了选择列表中ng repeat上的orderBy。Choices是一个包含10000条记录的大列表。这稍微提高了速度,但在iPhone3上仍然很慢。

这是一个自定义设置,因此也可以在您的问题中添加一些相关代码。另外,iphone3g于2008年发布,在一个非常古老的移动领域。在搜索字段中输入至少三到四个字符或限制为100个结果后,是否可以开始显示选择列表?无论如何,显示10000个项目没有多大意义。谁会把整个列表向下滚动而不是一直输入呢?Jorg,正如在帖子中所说的,摆脱iPhone3s不是一个选项。不确定什么代码是相关的,因此使用plunker。不确定键入3个字符后最多100个结果是什么意思。你说的是基于搜索输入的服务器端选择加载吗?我不是说要摆脱旧型号,我想你被旧技术困住了……也许我误解了。通常情况下,它不是存储一个缓慢的选择数组,而是显示它们。因此,不要显示所有选项。我真的不能让你的plunkr做任何事情。Jorg,对plunker不起作用感到沮丧,在chrome和safari中为我工作,哦,好吧。我把ng重复代码放在原来的帖子里。我正在使用ng repeat limitTo最初设置为50,并在向下滚动选项时使用无限滚动将limitTo增加50。只是在将选择数组中的选择添加到选择数组时,速度似乎很慢。实际上,我并没有从choices数组中删除该选项,我只是将名为“selected”的属性设置为true并按其过滤。不过,我确实从selections数组中添加和删除了choice对象。
<a bindonce refresh-on="'refreshSelect'" ng-repeat="selection in selections | orderBy:'name' track by selection.id" ng-click="removeFromSelections(selection)">
    <div class="well well-sm" style="margin-bottom: 10px;">
        <strong>
            <span bo-bind="selection.name"></span> 
            <span class="badge" ng-show="selection.badgeValue" bo-bind="selection.badgeValue"></span>
        </strong>
    </div>
</a>