Angular.js Rendering Slowly in IE
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!