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.csdn.net/u013588178/article/details/48282259)