angularJS1.x版本$watch过多的场景分析和优化（ng-repeat+angular-ui-select）

1、如何检查页面$watch数量

在控制台上复制下列代码执行即可看到$watch数量:

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;

或者安装chrome下的Angularjs拓展AngularJS Batarang也可以实时查看页面的$watch数量.

2、ng-repeat中的行数据使用了angular-ui-select组件

这种场景之下，$watch数量很容易超过2000甚至4000。 $watch数量在2000的时候，web页面卡顿还不明显；到达4000的时候，会有很明显的卡顿（作者的浏览器版本是 chrome 63.0.3239.108（正式版本） （64 位））。

 （原因分析：angular-ui-select本身就使用了比较多的angular指令，例如 ng-bind/ng-class/ng-model/ng-hide/ng-show/ng-disabled等，这些指令都会生成$watch。而且angular-ui-select组件自身也是用ng-repeat，所以当外层再套用一个ng-repeat的时候，$wacth数量可想而知） 

     

3、关于ng-repeat的优化

尽量不要在ng-repeat中直接对行数据进行编辑（可以新弹出一个编辑页面，在新页面中进行操作）。

angular1.x已经是比较老的版本，优化核心思想还是减少$watch数量、在ng-repeat中对可以使用单次绑定的数据，使用单次绑定。

具体的操作步骤这里不再赘述，请参考前人整理好的文章^_^。

（传送门：https://blog.youkuaiyun.com/u013588178/article/details/48282259）