ng-repeat 中的角性能答案

【问题标题】：Angular performance in ng-repeatng-repeat 中的角性能
【发布时间】：2014-05-21 04:14:38
【问题描述】：

我遇到了 ng-repeat 指令的性能问题，我使用 ng-repeat 指令渲染了 PDF formFields，不知何故它停止了我的浏览器。但是当我在同一个 ng-repeat 中同时使用 track by $index 和 limitTo:1 时，它工作正常并且提高了渲染速度。我无法理解这背后的逻辑，但它的运行速度非常快:)

这对我来说工作得更快更好，limitTo:1 也不起作用，它是如何将限制与 $index 绑定并修复浏览器暂停问题。

    <div ng-repeat="friend in friends track by $index | limitTo:1">
              {{ friend.id }} &mdash; {{ friend.name }}
            </div>

如果我们在通过 $index 跟踪之前使用 limitTo ，那么它的行为通常是 angular js 的限制行为，这是可以理解的

  <div ng-repeat="friend in friends | limitTo:1 track by $index">
                  {{ friend.id }} &mdash; {{ friend.name }}
                </div>

或

        <div ng-repeat="friend in friends | limitTo:1">
                      {{ friend.id }} &mdash; {{ friend.name }}
                    </div>

虽然我实现了我的性能目标，但我想知道这背后的逻辑。这是jsfiddle的链接 http://jsfiddle.net/neglingeyes/G6q84/

【问题讨论】：

那么问题是什么？
他“无法理解这背后的逻辑”所以也许他想要解释发生了什么......？也许他想卖砖，不确定-.-'
我的问题是，我无法理解 limitTo 和 track by $index 如何协同工作以及如何提高速度。
你试过用括号吗？
没错！ .

标签： angularjs angularjs-ng-repeat

【解决方案1】：

您不能使用 post-repeat 一次测量多个 ng-repeat 指令。这是因为它试图确定渲染何时完成的方式是为下一个事件循环滴答设置超时函数，这实际上意味着页面上的所有指令都已完成渲染，而不仅仅是这个特定的 ng-repeat。在您的演示小提琴中，我猜每个下一个重复后超时都会在一个单独的事件循环滴答或类似的东西中处理，这就是为什么它们的“测量”性能似乎越来越差。如果你改变了他们的顺序，第一个似乎是最快的。但只有几毫秒 - 一个微不足道的差异。

您是否尝试过分别对每个案例进行基准测试？另外，在什么平台上使用什么数据？在桌面浏览器上，数据如此短，无论哪种方式都太快了。

至于第一个代码段的作用 - 它被解析为friend in friends track by ($index | limitTo:1)（“什么括号？”;-)） limitTo 过滤器只能应用于数组，不能应用于像数字$index 这样的标量变量。但是，如果角度过滤器无法理解，它们通常会原封不动地返回它们的输入，所以我想这也是这里发生的情况。

【讨论】：

【解决方案2】：

这里有一个解释：

默认情况下，ng-repeat 为每个项目创建一个 dom 节点，并在项目被删除时销毁该 dom 节点；当它观察 ng-repeat 对象时，它期望对象改变并实现改变，因此不断添加或删除节点。但是使用 $index 它会重用 DOM 节点。

这是我获取此信息的链接-http://www.reddit.com/r/angularjs/comments/2cvo16/speeding_up_angularjs_with_simple_optimizations/

【讨论】：