Question

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

这对我来说更快更好，也限制为：1不起作用，一些如何用$ index绑定限制并停止修复浏览器问题。

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

如果我们在跟踪$ index之前使用limitTo而不是正常运行角度js的限制行为，这是可以理解的

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

OR

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

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

Answer 1

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

您是否尝试过分别对每个案例进行基准测试？此外，在什么平台和什么数据？在桌面浏览器上以及使用如此短的数据时，无论如何都无法发挥作用。

关于第一个代码段的作用 - 它被解析为friend in friends track by ($index | limitTo:1)（“什么括号？”;-)） limitTo过滤器只能应用于数组，而不能应用于数字$index等标量变量。但是角度滤波器通常会在没有意义的情况下返回它们的输入，所以我猜这就是这里发生的事情。

Answer 2

以下是解释：

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

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

ng-repeat中的角度性能

2 个答案: