AngularJS ng-repeat 对于大量数据来说非常慢

标签 angularjs performance angularjs-ng-repeat

我正在使用单板系统。其中有需要显示的卡片,也可以将卡片拖放到面板中。

看板上有n个行和列,并且卡片可以拖放到任意行和列

所以我用嵌套ng-repeat实现了它,并且它工作正常。

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

由于数据较多并且使用了嵌套的ng-repeat,因此迭代次数较多。

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

那么在这种情况下,我如何提高使用 ng-repeat 或任何其他替代方案渲染板的性能。

如有任何帮助,我们将不胜感激。

谢谢

最佳答案

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

关于AngularJS ng-repeat 对于大量数据来说非常慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45389602/

相关文章:

java - 如何自动化性能测试并与 CI 集成?

javascript - Angular - 在 ng-repeat 内迭代数组并从另一个数组中获取值

angularjs - 重复器错误中的重复 key [ngRepeat :dupes]

javascript - angularjs - ngRoute 无法正常工作

javascript - 使用两个不同的 Controller 文件时,部分 View ng-click 不起作用

Android 性能问题 : Many small apps or one big app?

c# - 在 .NET 中,哪个循环运行得更快, 'for' 还是 'foreach'?

javascript - ng-repeat 仅显示 json 中的最后一项

javascript - 你如何在 html 中更改 img 上的工具提示值

javascript - 范围何时在 angularjs 生命周期中自然被销毁