如何减少对Angular $ digest-cycle的调用

Question

问题

虽然我的应用程序中的$digest -cycle仍然运行非常快，但我注意到某些回调（例如通过ng-if绑定在模板中）的调用频率比我预期的要多。 在单个UI交互上最多可以进行100多个调用（我通常希望最多在3到10个调用之间）。

我想了解为什么经常调用回调，并可能减少调用次数以防止将来出现性能问题。

我尝试了什么

据我了解，所描述的行为意味着$digest -cycle最多需要数百个循环才能删除所有脏标志并确保所有渲染的节点都是最新的。

我简化了几个回调，使其仅返回true而不是评估某些模型值-这对$digest调用的数量完全没有影响。 我还检查了Chrome-developer-Tools中的Performance-Tab，它仅告诉我调用本身是在几毫秒内执行的。

为了排除故障，我还删除了整个应用程序中的几个ng-repeat块和angular-filters ，因为它们显然会应用多个手表，以在$ digest循环中进行评估。 这也不影响对回调函数的调用次数。

因此，我想我需要一个更复杂的工具或方法来调试整个应用程序中的（摘要）调用的数量，以弄清所有这些调用的来源以及如何减少调用。

问题

我可以使用哪些工具和方法来评估我的角度应用程序中$ digest-loop（特别是循环数）的性能？

如何减少模板中绑定的回调的调用次数？

我认为回答第二个问题对了解在类似这样的设置中导致foo()额外调用的原因已经有所帮助：

<div ng-if="ctrl.foo()">
    <!--<span>content</span> -->
</div>

Answer 1

第一件事实际上是在angularJS中消化循环吗？

1.它的过程，其中角度框架检查所有两种方式的绑定变量是否不断变化。

2.当用户交互并更改两种方式的绑定变量时，它就会起火。

3.以编程方式（在控制器，服务或工厂中）两种方式的绑定变量被更改

以上是引发火灾摘要循环调用的原因...

消化周期的哪个实体？

1.在变量上添加了$ watch。

2. ngModel，ng-model iteself在变量内部内部添加$ watch

基本上$ watch功能。

我们该如何避免$ digest / avoid调用$ watch？

1. 考虑一下UI中使用的变量，该变量是否需要双向绑定？ 如果答案为“ 否”，则只需采用单向绑定语法

2. 避免从控制器，服务，工厂使用监视功能，然后如何观看...

   1. RX js是目前最好的库，可以帮助克服此问题。 它只是一个选择。

   2. 使用getter设置器

      怎么样？

 mymodule.controlle('ctrName', ctrClass); ctrClass { constructor($scope) { this.myVar1 = null; this.myVar2 = null; } set myVar1(value) { // either code which i want in watcher // or // Some function which i want to execute after value get set this.afterSet(); return this.myVar1 = value; } afterSet() { } } 

3. 使用controllerAs角度功能

4. 创建具有隔离范围的指令

关于工具：

要验证角度应用，Batarange是一个很好的工具。