AngularJS 性能优化二三事

在过去的两年中，angularjs 的使用率有了很大的提升。简单的双向绑定是促使其流行的主要原因之一，但与此同时，它导致了在一个应用中出现了大量的 watcher。在后台，angularJS 会执行所谓的 “脏值检查”。之所以要做脏值检查目的是为了检查在 “scope” 中的数据是否发生了变化;框架必须周期性的检测数据是否发生了变化… 脏值检查会每 40ms 更新一次.. 想想看.. 如果它需要检查超多数据的时候; Crap!!

让我们来看看如何改善 angularJS 的性能..

减少 watcher 数量

可能很多人都会抱怨 angular js 应用的性能; 特别是当他们用了 ng-repeat 的时候;为什么会这样？ Watcher 应该是这背后的主要原因。一个 angular 指令会产生一个 watcher (比如 ng-src;ng-href;)
下面的例子很详细的解释了这种情况
http://plnkr.co/edit/jwrHVb?p=preview
看看上面的例子，你加载的数据越多; 产生的 watchers 就越多;

解决方案
通过使用 bindonce 指令来避免使用双向绑定; 当你不需要双向绑定的时候，试试看用 bindonce 指令，比如 bo-if; bo-show; 看看下面这个精简过 watcher 数量的例子

http://plnkr.co/edit/0DGOrk?p=preview
文档和源码放在这里
https://github.com/Pasvaz/bindonce

延迟加载 angular controller

在初始化的时候加载控制器对小应用来说很合适；但是如果应用的 scope 很大怎么办？
如果我们在特定页面初始化的时候，把控制器动态的加载到我们的 DOM 上会怎样? 很赞，对不对？

如果这些控制器是在特定页面加载之后，动态的加载到 DOM 上的话; 不单应用的初始化会很快; 而且也会降低在 DOM 中生成的对象数量;

下面例子是如何动态加载控制器到 DOM
https://github.com/ifyio/angularjs-lazy-loading-with-requirejs

删除那些不在你 viewport 中的，多余的 html 对象

对于不定长列表最常见的问题…. 尤其是在用 ng-repeat 的时候; 就是你必须把所有数据都加载进来，即使你只需要显示其中一部分数据; 每次重复会生成至少同样数量的 watcher;
所以为什么不只加载显示所必要的那部分数据呢。是不是很 Crazyyyyyyyyyy？试试这个
https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md

这个指令只加载那些在 viewport 中的对象，并清除那些看不到的;
这不仅仅削减了watcher数量，同时也降低了浏览器中 DOM 的大小。是不是超酷？

你觉得呢？告诉我呗。