ページ上の角度ウォッチャーをカウントするには？

Question

ページのウォッチャー数を正確に数えるにはどうすればよいですか？

私はそれを行う方法について、いくつかの異なった記事を見つけましたが、それらはすべて私に異なる数を与えるので、私は正しい方法である見つけるのに苦労しています。

StackOverflowのhereは、次のコードである：私はAngularjs.orgホームページ上でそれをテストする場合

(function() { 
var root = angular.element(document.getElementsByTagName('body')); 

var watchers = []; 

var f = function (element) { 
    angular.forEach(['$scope', '$isolateScope'], function (scopeProperty) { 
     if (element.data() && element.data().hasOwnProperty(scopeProperty)) { 
      angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) { 
       watchers.push(watcher); 
      }); 
     } 
    }); 

    angular.forEach(element.children(), function (childElement) { 
     f(angular.element(childElement)); 
    }); 
}; 

f(root); 

// Remove duplicate watchers 
var watchersWithoutDuplicates = []; 
angular.forEach(watchers, function(item) { 
    if(watchersWithoutDuplicates.indexOf(item) < 0) { 
     watchersWithoutDuplicates.push(item); 
    } 
}); 

console.log(watchersWithoutDuplicates.length); 
})(); 

、それは私に132のウォッチャーを与えます。私はその後、次のコードで、ミディアムポストhereを見つけ

：

function getWatchers(root) { 
    root = angular.element(root || document.documentElement); 
    var watcherCount = 0; 

    function getElemWatchers(element) { 
    var isolateWatchers = getWatchersFromScope(element.data().$isolateScope); 
    var scopeWatchers = getWatchersFromScope(element.data().$scope); 
    var watchers = scopeWatchers.concat(isolateWatchers); 
    angular.forEach(element.children(), function (childElement) { 
     watchers = watchers.concat(getElemWatchers(angular.element(childElement))); 
    }); 
    return watchers; 
    } 

    function getWatchersFromScope(scope) { 
    if (scope) { 
     return scope.$$watchers || []; 
    } else { 
     return []; 
    } 
    } 

    return getElemWatchers(root); 
} 
getWatchers().length 

テストは、このAngularjs.orgのホームページには、152のウォッチャーを返します。単にangular.element('body').scope().$$watchersCountリターン80

を使用

IはSOコードは、それが同じ表現を見ている重複を除去することで、重複を削除することを理解する（これだけが!visibleような発現のためにリストされているウォッチャあろう）、または重複ウォッチャーオブジェクトを削除していますか？

更新：

私は食い違いが重複からで実現しています。しかし、重複するウォッチャーはパフォーマンスに影響しますか？

Answer 1

このスクリプトでは、あなたの ページ

にあるだけで、ブラウザのコンソールに以下のスクリプトを貼り付け、それはあなたのページにあなたの

をウォッチャー数を教えてくれますどのように多くのウォッチャー識別するのに役立ちます

function getWatchers(root) { 
    root = angular.element(root || document.documentElement); 
    var watcherCount = 0; 

    function getElemWatchers(element) { 
    var isolateWatchers = getWatchersFromScope(element.data().$isolateScope); 
    var scopeWatchers = getWatchersFromScope(element.data().$scope); 
    var watchers = scopeWatchers.concat(isolateWatchers); 
    angular.forEach(element.children(), function (childElement) { 
     watchers = watchers.concat(getElemWatchers(angular.element(childElement))); 
    }); 
    return watchers; 
    } 

    function getWatchersFromScope(scope) { 
    if (scope) { 
     return scope.$$watchers || []; 
    } else { 
     return []; 
    } 
    } 

    return getElemWatchers(root); 
} 
getWatchers().length