angularjs ng-repeat 对于大量数据非常慢

【问题标题】：angularjs ng-repeat is very slow with heavy dataangularjs ng-repeat 对于大量数据非常慢
【发布时间】：2017-07-29 13:02:02
【问题描述】：

我正在使用单板系统。其中有卡片需要展示，卡片可以拖放到板子中。

板中有n行和列可能并且卡片可以拖放到任意行和列。

所以我已经用 nested ng-repeat 实现了它，它工作正常。

但是当板载超过 300 张卡时，加载大约需要 8000 毫秒到 9000 毫秒的时间。

因为数据更多并且使用了嵌套的 ng-repeat，所以有很多迭代。

由于需要在单板中显示所有卡片，因此无法进行延迟加载。

因此，在这种情况下，我如何提高使用 ng-repeat 或任何其他替代方法渲染板的性能。

任何帮助将不胜感激。

谢谢

【问题讨论】：

【解决方案1】：

提高 ng-repeat 性能的一种方法是将其与 track by 一起使用：

<div ng-repeat="item in array track by item.property"> </div>

如果项目属性不是唯一的，请尝试以下操作：

<div ng-repeat="item in array track by $index"> </div>

【讨论】：

我已经使用

我正在尝试
我试过

它将时间从 9000ms 减少到 4000ms 到 5000ms。我检查了所有过滤器，每个想法都快速响应，但重新渲染需要时间。
您可以像这样在 AngularJS 中使用一次性绑定：<div ng-repeat="item in ::array track by item.property"> {{::item.property}} </div> 当您使用此语法时，对对象所做的更改将不会被更新。来自文档的一次性绑定非常简单：一次性表达式一旦稳定就会停止重新计算，如果表达式结果是未定义的值，则会在第一次摘要之后发生。