我有一个带有代码完成编辑器的应用程序。当用户开始输入时,将创建并显示数组 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>
最佳答案
除了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)
关于javascript - ng-repeat 的性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33525617/