如何減少對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是一個很好的工具。