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个案例，因此应用程序存储状态在全局控制器AppController - 胖控制器中。 html中还有20k +节点，数量可以增长（我看到的最大值是60k）

Answer 1

$ eval在解析角度表达式时由内部角度使用，例如{{variable}}。在没有看到任何代码的情况下，很难说出哪些表达式不必要地使用资源，但是ng-repeat中包含的ng- s（或许多ng-repeat指令通常太大或嵌套{{}}代码气味。

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

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

大多数情况下，当您使用::绑定值时，您实际上并不期望值会更改（如标签），并且此双向数据绑定完全是超级的。从角度版本1.3开始，您可以使用ItemWriteListener语法选择create one-time bindings：

  

一次性表达式将在稳定后停止重新计算，如果表达式结果为非未定义值，则会在第一次摘要后发生

消除了此类绑定的相应性能开销。 （如果您使用较旧的角度版本，外部库可以模仿此行为，例如bindonce。）

以下是我在分析/优化角度应用时发现有用的其他工具：

• Batarang，Chrome扩展程序＆＃34;用于调试和分析角度应用程序＆＃34;

• This stackoverflow answer，提供了一个简洁的解决方案，用于计算您网页上有多少个观看表达式处于活动状态。一个经验法则是，如果你超过2000，你将开始注意性能问题，你应该考虑改变你的架构 - 采用延迟加载机制，重新考虑你是否真的需要所有绑定等。< / p>

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