Question

如何准确计算页面上观察者的数量？

我发现了一些关于如何做的不同文章，但它们都给了我不同的数量，所以我很难找到哪种方法正确。

StackOverflow here包含以下代码：

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

当我在Angularjs.org主页上测试时，它给了我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.

我理解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

如何在页面上计算Angular Watchers？

1 个答案: