$ apply中的Angularjs性能问题，但绑定很快

Question

我有一个中等角度的应用程序，它使用angular-1.2.10和ui-router-0.2.8。当我转换到特定状态时，无论是否在ng-show上使用$ animate或手动设置动画，我都会在动画上出现帧速率问题。

当我深入剖析探测器时，我可以看到XHR在200ms之后的$ apply。我认为这是滞后的原因。当我删除我要进入的状态的代码时，这个问题就像预期的那样。

没有大的ng-repeat，并且绑定很快：

这让我有点卡住，因为我无法看到问题的起源。如果有人能够看到某些东西指向正确的方向，那就太好了。

UPDATE 我已经完成了进入incoginto模式并使用$ digest计数器运行相同的测试。 $ digest运行40次并生成以下内容。

很多事情似乎需要很长时间（30ms +），但我仍然找不到原因。

UPDATE 看时间线似乎有很多DOMSubTreeModified。

Answer 1

Angular使用$ digest周期来查看是否需要更新。您经常计算的纯粹事实可能只是潜在优化的另一个症状。真正的问题在于它正在采取的时间，以及处理瓶颈，因为它减慢了动画。所以有几件事要尝试：

• 确保你没有深入观察任何事情，这意味着你不应该为objectEquality传递'true'。这个过程更加密集，也会占用更多内存。

• 如果涉及指令，请使用隔离范围 - 如果可以的话。与继承范围相比，拥有隔离范围将减少$摘要的抖动，因为只要父控制器发生更改，它就会重新消化所有共享范围。

• 尝试使用事件处理程序替换$ watch语句（如果它们在DOM中呈现）。这样做的原因是，您可以通过$处理数据（在XHR调用结束时）广播事件来减少重新呈现DOM的次数，而不是每次修改属性时重新呈现。

• 您可以使用硬件加速属性通过CSS动画来平滑它吗？

Answer 2

多个$摘要表示您有级联模型更改，其中更改a会触发$watch('a')，而b会更改$watch('c')，从而触发另一个可能触发$watch('a')的摘要，触发另一个摘要，可能（天堂禁止）触发$watch。

即使每个{{1}}评估都很快，级联也可能需要很长时间。如果您可以一次性完成所有更改，而不会在手表之间传送它们，那么您将减少摘要数量。

Answer 3

如果没有标记中的代码和绑定，很难提供帮助。如果您有部分UI是只读的并且它不依赖于多个摘要周期，请尝试使用bindonce：https://github.com/Pasvaz/bindonce。它可以帮助您减少观察者的数量和意外的摘要周期。