Question

问题

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

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

我尝试了什么

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

我简化了几个回调，只返回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。其角度框架检查所有双向绑定变量的过程由其自身连续变化。

2. 当用户进行交互并更改双向绑定变量时，它就会起火。

3。以编程方式（在控制器，服务或工厂中）双向绑定变量得到改变

以上是解雇消化循环呼叫的原因......

哪个实体是摘要周期的一部分？

1。 $ watch添加了变量。

2。 ngModel，ng-model iteself内部添加$ watch on varaible

基本上是$ watch功能。

我们可以做些什么来避免$ digest /避免拨打$ watch？

考虑在UI中使用变量，这个变量需要双向绑定吗？如果答案是否，那么只需要单向绑定语法

避免使用来自控制器，服务，工厂的监视功能然后我该怎么看呢......
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() {
    }
}

使用angular

controllerAs

使用隔离范围创建指令

关于工具：

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

如何减少对Angular $ digest-cycle

1 个答案: