Recently while working on an Angular.js application, I learned that the maximum number of bindings you would want on a single angular page is 2000. This translates into watches directly.
Here’s a script to determine the current number of watches in your application (source):
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);
r
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
This won’t directly affect creating new items in a page (like adding a row to a table) but it will affect overall page performance. For example, scrolling will be slow and jagged, or navigating to a different page will take a long time.
Side note: In Tracker’s item search, when displaying 25 items (each with 15 columns), it has over 6000 watches!
