javascript - $apply 中的 Angularjs 性能问题，但绑定(bind)很快

Question

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

当我深入分析器时，我可以看到 XHR 之后的 $apply 花费了 200 毫秒。我认为这是滞后的原因。当我在我要去的状态下删除代码时，这个问题如预期的那样发生。

没有大的 ng-repeat，绑定(bind)很快:

这让我有点卡住了，因为我看不出问题的根源。如果有人能看到一些东西为我指明正确的方向，那就太好了。

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

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

更新看时间线似乎有很多 DOMSubTreeModified。

Answer 1

Angular 使用 $digest 循环来查看是否有任何内容需要更新。您计算很多的纯粹事实可能只是潜在优化的另一个症状。真正的问题在于它所花费的时间以及处理瓶颈，因为它正在减慢动画速度。所以有几件事可以尝试:

• 确保您没有深入观察任何内容，这意味着您不应该为 objectEquality 传递“true”。此过程更加密集，也使用更多内存。

• 如果涉及到指令，请使用隔离作用域 - 如果可以的话。与继承范围相比，拥有隔离范围将减少 $digests 的喋喋不休，因为只要父 Controller 发生变化，它就会重新消化所有共享范围。

• 如果 $watch 语句在 DOM 中呈现，请尝试用事件处理程序替换它们。这样做的原因是，一旦数据被处理(在 XHR 调用结束时)，您可以通过 $broadcasting 事件减少重新渲染 DOM 的次数，而不是每次修改属性时都重新渲染.

• 您能否使用硬件加速属性通过 CSS 制作动画以使其平滑？