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>

- Anonymoose

---

首先尝试使用track by uniqKey。例如：ng-repeat="user in user track by user.id" - Errorpro

你能分享一些代码，说明如何填充proposals的项吗？这会对性能产生很大影响，因为如果数组实例发生更改，ngRepeat将重新生成列表。 - Reactgular

Answer 1

除了使用 track by，您还可以使用单向绑定而不是双向绑定来减少监视器的数量：

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

如果你在文本输入框中使用ng-model等技术，你可以考虑另一种解决方案：ng-model-options debounce属性。你可以指定一个延迟时间，在此之后进行模型更新。例如，将debounce设置为500毫秒，这样如果用户快速连续输入，它不会多次更新。

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

(Angular >= 1.3)

- Komo

---

添加这个轨道真是太神奇了。非常感谢！ :) - Anonymoose

Answer 2

如果您的列表在运行时不会更改，可以使用单向绑定。使用单向绑定可以提高应用程序性能，因为它可以避免“监视脏检查周期”。例如：

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

- Sandeep