如何减少对 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 调用，甚至找出所有这些调用的来源以及如何减少它们。

问题

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

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

我认为要回答第二个问题，了解在这样的设置中可能导致对foo() 的额外调用已经很有帮助：

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

Answer 1

首先在 angularJS 中实际消化循环的是什么？

1. Angular 框架不断检查所有双向绑定变量的过程。

2.当用户交互并更改双向绑定变量时，它就会触发。

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

以上是触发摘要循环调用的原因...

哪些实体是摘要循环的一部分？

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

2. ngModel, ng-model 本身在内部添加 $watch 变量

基本上是 $watch 函数。

我们可以做些什么来避免 $digest/avoid 调用 $watch？

1. 想想UI中使用的变量，这个变量需要双向绑定吗？ 如果答案是 NO 则只使用单向绑定语法

1. 避免使用控制器、服务、工厂的监视功能 那我怎么看……

   1. RX js 是目前最好的库，可以帮助解决这个问题。它只是一种选择。

   2. 使用getter setter

      怎么做？

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() {
    }
}

1. 使用controllerAs angular的特性

2. 创建具有隔离范围

的指令

关于工具：

验证 Angular 应用程序 Batarange 是很好的工具。