Angular-嵌套$ scope是否會產生嵌套$ watchers？

Question

我遇到了性能問題，我認為是由於該頁面中有很多觀察者（超過4000名！）。 該場景是ng-repeat中一次（很小，約5個）項的列表，每個星期中的每一天（因此7）都包含另一個ng-repeat，並且在每天的容器中有1或2個輸入字段。 每天的元素都有其自己的作用域和控制器，並監視父級的屬性，以便在子項更改時更新父級狀態。 如此復雜的場景...想象一個議程視圖，其中每天都有一些輸入字段或按鈕在主范圍內更新相同的屬性，例如“選擇/填充/點擊10天”。

我從大約5000個觀察者開始，現在減少到大約4000個，刪除了一些過濾器，並切換到由translation （angular-translate） 安裝的一次轉換指令。

因此，主要問題是：

如何進一步減少觀看人數？

每個子作用域是否繼承父觀察者，因此每個觀察者的結果是7倍？ 如果我刪除孩子的控制器，將工作留給父母（將功能傳遞給孩子項），我會減少觀察者的人數嗎？ 這可以解決嗎？ 任何幫助表示贊賞。

Answer 1

根據我們的經驗，看守人數不會造成速度問題。 我們在單個大型應用程序的最后8個月開發中遇到的性能問題是由於第三方組件的速度慢所致。

例如，我們有一個頁面，其中包含兩棵具有14.600個觀察者的拖放樹（由於兩棵樹中都有大量項目）。 由於使用了angular-ui-tree組件，因此我們遇到了性能問題，並且在大多數樹折疊時，我們減少了打開頁面的過程。

我們無法更改該組件，因為它是唯一在樹之間進行拖放的組件，但是在另一頁中，我們在簡單列表之間進行了拖放，因此我們嘗試了這兩個組件： angular-dragdrop和angular-drag-and-drop -列表 。 前一個有很多性能問題（約有500個項目），而第二個運行確實非常快。 在github上的文檔中， “為什么要使用另一個拖放庫？”部分。 您可以了解為什么它這么快，而另一個為什么這么慢。

因此，我可以推測，第三方的組件會給您帶來真正的性能問題，而不是觀察者。

無論如何，我們經常給我們的觀察者一個檢查，如下所示：除非需要，否則不要運行代碼。

$scope.$watch('variableToWatch', function(newValue, oldValue) {
    if (newValue === oldValue) {
        return;
    }

    ... watcher code ...
}

減少html監視程序的另一種方法是使用一次綁定 。 例：

<div ng-if="::vm.user.loggedIn"></div>

Answer 2

與性能有關...-我想出的一種模式是使用私有對象並分配函數原型以便於訪問。 然后在任何函數，控制器，指令...中，您都可以輕松訪問其他函數，控制器，指令的原型。 您可以像事件循環一樣使用此模式，而不是使用觀察程序。 而不是每個摘要周期都需要300個以上的觀察者。 使用此模式僅觸發函數調用的因素很重要。

這種模式的一個例子

 var private = {} //accesable to entire app var app = angular.module('some-app',[]) .controller('someCtrl',['$scope',someCtrl]) .directive('someDirective',someDirective); function someCtrl($scope){ private.someCtrl = someCtrl.prototype someCtrl.prototype.update = function(someDate){ //do something.... //access to someCtrl arguments $scope.something = someDate } } function someDirective(){ var someCtrlProto = private.someCtrl; return{ link:function(scope ,elm ,attr){ elm[0].addEventListener('click',fucntion(){ someCtrlProto.update(someData) }); //or elm[0].addEventListener('click',someCtrlProto.update) //to trigger someCtrl.update from here } } }