javascript - ng-repeat 的性能

Question

我有一个带有代码完成编辑器的应用程序。当用户开始输入时，将创建并显示数组 proposal。阵列的创建进行得非常快，几乎是瞬间完成的。最坏情况下数组的长度约为 500 项。

问题是数组在用户输入时不断改变值。 ng-repeat 的渲染大约需要 1-2 秒，这在打字过程中会造成巨大的延迟。我真的不明白为什么这是一个问题，就计算 500 个项目的数组而言是花生。

我宁愿不限制数组，因为用户可以滚动浏览它。还有其他加快速度的建议吗？

<li ng-repeat="proposal in proposals"  ng-dblclick="copyProposal()" ng-class="{selected : proposal.selected}">
    <img src="assets/img/key.png" ng-show="proposal.isKey" class="icon"/>
    {{proposal.text}} 
    <span ng-show="proposal.type" class="detail">- {{proposal.type}}</span>
</li>

Answer 1

除了track by之外，您还可以使用单向绑定(bind)而不是双向绑定(bind)来减少观察者:

ng-repeat="proposal in proposals track by proposal.id" 
{{::proposal.text}}
{{::proposal.type}}

您可以研究的另一件事(如果您在某处使用 ng-model，比如您的文本输入)是 ng-model-options debounce 属性。您可以指定完成模型更新后的延迟。例如，将 debounce 设置为 500ms，这样如果用户快速连续键入，它就不会更新多次。

ng-model-options="{ debounce: 500 }"

( Angular >= 1.3)