javascript - AngularJS:$eval 需要很多时间

Question

在分析我的 angularjs 应用程序时，我发现有时 $get.Scope.$eval 需要超过 100 毫秒。在单个 $digest 循环中，至少有 3 个长的 $get.Scope.$eval 案例，我想优化这部分。

在探查器的 $get.Scope.$eval 下方，我看到仅调用了 angularjs 代码。

这是个人资料图表的屏幕截图。

任何人都可以建议，这是怎么回事以及如何优化这部分？我想这可能是由 ng-repeat、ng-include 或 ng-if 引起的，但我不确定。

更新:这是我的 application 的简化结构.可能问题出在我的应用程序的体系结构中。该应用程序主要在单一路由上工作并且仅在 3 种情况下更改它，因此应用程序将状态存储在全局 Controller AppController - 胖 Controller 中。 html 中还有 20k+ 个节点，并且数量可以增长(我看到的最大值是 60k)

Answer 1

$eval 在解析 Angular 表达式时由 Angular 内部使用，例如 {{variable}}。在没有看到任何代码的情况下，很难判断哪些表达式在不必要地使用资源，但通常太大或嵌套的 ng-repeat(或许多 ng- 指令包含在ng-repeat) 是一种代码味道。

Angular 使用脏检查来评估这些表达式(因为没有更好的选择)——这意味着每次您使用 {{}} 语法创建绑定(bind)时，它都会创建一个隐式的 $watch获取该值的表达式，将在每个摘要周期调用以查看该值是否已更改(在更改时重新生成 DOM 的相关部分)。

这是我过去成功使用的一项优化:

大多数时候，当您使用 {{}} 绑定(bind)一个值时，您实际上并不期望该值发生变化(如标签)，而这种 2 向数据绑定(bind)是完全多余。从 Angular 版本 1.3 开始，您可以选择 create one-time bindings使用 :: 语法:

One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value

这消除了此类绑定(bind)的相应性能开销。 (如果您使用的是较旧的 Angular 版本，外部库可以模仿这种行为，例如 bindonce 。)

以下是我在分析/优化 Angular 应用程序时发现的一些有用的其他工具:

• Batarang ，“用于调试和分析 Angular 应用程序”的 chrome 扩展

• This stackoverflow answer ，提供了一个简洁的解决方案来计算您的页面上有多少观察表达式处于事件状态。一条经验法则是，如果您超过 2000，您将开始注意到性能问题，并且您应该考虑更改您的架构 - 采用延迟加载机制，重新考虑您是否真的需要所有绑定(bind)等。

• 在生产环境中 disabling the default "debug mode" of angular也有助于提高性能。