最近在开发Hybrid APP (我用的是Ionic Frameworks) 的过程中，随着首页栏目的逐渐增加，APP在手机上的执行效率越来越低，有时在切换频道的时候会有明显的卡顿和执行延迟。

在检查完代码逻辑和算法后，并没有发现什么问题 （网络通讯，本地缓存）。最近在翻阅代码的过程中，突然意识到可能是由于频道增加，页面中双向绑定使用数量变多，导致 AngularJS 在作 digest loop 的时候，由于 $$watchers 数量过多导致程序变慢。

要想确定猜想，需要先能统计到页面中随着频道进入$$watchers的数量，于是写了如下代码，在Chrome的控制台中执行，便可以方便的进行统计。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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

随即发现，在频道页面不断加载的过程中， $$watchers的数量在不断增加，最多的时候有 5000个之多。

发现问题就好解决了。由于频道内容列表页面在一次加载后就不需要再进行变化监听，所以这里打算对代码中的data-binding 部分使用 bindonce 的方式解决。

这里还有两个关于 bindonce 的示例：

使用AngularJS 原有Bind
使用Bindonce