嵌套ng-repeat的DOM娱乐性能问题

Question

我正在使用AngularJS渲染日历用户界面，而且在翻阅几周时我遇到了一些相当大的性能问题。让我解释一下。

UI看起来像这样：

我遍历所有人，然后为我循环过去的每个人，然后为那天的该用户呈现日历对象。像这样（简化）：

<div ng-repeat="user in ::ctrl.users track by user.id" class="row">
    <div ng-repeat="day in ctrl.days" class="cell">
        <div ng-repeat="item in ctrl.items[user.id][day] track by item.id">
            <div class="item">

这个页面上没有一个疯狂的观察者（大约500个），几乎所有东西都是绑定一次。

问题是当用户点击上一个/下一个按钮来加载上一周或下周时。这会将ctrl.days数组更改为新的日期，并加载所有正确的项目。这样做会很好，直到你有大量的人和日历项目。然后，DOM元素的所有破坏和重新创建都非常慢。

我遇到了sly-repeat指令，它用于缓存和重用DOM元素，但由于我的外部ng-repeat更改（ctrl.days），内部ng-repeat（带项目）也被重新创建。所以它并没有真正起作用。

我该如何解决这个问题？现在，使用大型数据集浏览数周需要大约2秒钟，这当然是不可接受的。通过一小组用户和日历项目，一切都非常活泼。

Answer 1

尝试在嵌套的ng-repeats中使用track by。这将防止他们重新加载不必要的内部重复。有关更多信息，请参阅：

http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/