注* 相关文章 AngularJS在大型单页面应用中的性能优化（一）
尽一些可能避免长列表。ng-repeat会进行了一些很重的DOM操作（更不用说对$$watchers的污染），所以无论是在分页或是在无限滚动中，尽量使用小型数据进行渲染。
要尽量避免使用过滤器。他们会在每个更新周期运行两次，每当发生任何改变时运行一次，另一次是收集更深层次的改变时触发。所以不要直接从内部列表中移除对象，使用CSS控制即可。（注* 用添加CSS类名去隐掉他们）
渲染时的 $index 值并不是真正的数组索引值，它豪无价值。但是排好序的数组索引，无法让你遍历到所有列表中的域。
当使用ng-repeat时要尽量避免对全局列表的刷新。ng-repeat会产生一个$$hashkey属性和一系统唯一的项。这意味着当你调用 scope.listBoundToNgRepeat = serverFetch() 时会引起对整个列表的重新刷新。会通知执行所有的watchers并触发每一个元素，这是非常消耗性能的。
这里有两种解决方案。一种是维护两个集合，和带有过虑器(filter)的ng-repeat(基本上需要自定义同步逻辑，因此算法更复杂，可维护性更差)，另一种方案是使用track by去指定你自己的key(Angular 1.2 开始支持，只需要很少的同步逻辑)。
总之：
会比下面的这种慢
这种
比上面的慢些
测试用例可以在这里 http://plnkr.co/qRlVT52vaMreEkXvhQ3B 找到
另一个引起Angular应用慢的原因是不正确地使用 ng-hide/ ng-show 或 ng-switch。
ng-hide 和 ng-show 简单地对CSS display属性进行切换。这意味着表面上看不见的东西其实还存在于域中， 所有的$$watchers还是会被触发。
ng-if 和 ng-switch实际上从DOM中完全移除了，相应的域也会被移除。性能差异显而易见。
尽量减少你的绑定。在Angular 1.3中这里有一个新的一次绑定语法，{{::scopeValue}}。它只会被域执行一次，并不添加到监视器要监视列表中（watcher array）.
scope.$apply 是一个强大的工具，可以让你向Angular引入外部的值。本质上它会触发Angular的所有事件（例如ng-click）。问题是scope.$apply会从根域$rootScope开始，遍历所有的域链，触发每一个域。
scope.$digest只会执行指定域及其相关的域。两种性能差异不言自明。折中的方案是，不触发任何域等到下一个更新周期再更新。
scope.$watch() 已经在很多场景被讨论过的。基本上scope.$watch是不好的设计的一个标志。如果你非要创建一个观察者。记住对它尽可能地解绑。你可以用$watch的返回函数解绑。
如果你不能早一点解绑，记住在 $on('$destroy') 中进行解绑。
像$watch一样，他们都是一些很慢的事件，（有可能）遍历整个作用域。他们可能像GOTO一样，让你的程序无法调试。不过幸运地是像$watch一样，他们都可以在完全不需要的时侯解绑。比如在 $on('$destroy')中。
像前面提到的那样，你应该在$on('$destroy')中解绑你所有的事件侦听器，取消任何$timeout的实例，或者任何其它异步执行的交互。这不仅仅是确保安全。还可以让你的域更快地被垃圾回收。不这样做，他们会一直在后台运行。直接你清空CPU和RAM。
另外，解绑DOM上的事件侦听器也非常重要，不这样做很可能在老式浏览器中引起内存泄露。
scope.$evalAsync是一个强大的工具。它可以在当前域中执行，并不触发域的更新。evalAsync可以极大地提高你网页的性能。
域隔离和Transclusion是Angular最另人激动的特性，它们是Angular的核心组件。
但是这里也有一些权衡，指令不能直接创建一个替换他们父组元素的域。通过隔离的域或Transclusion我们可以创建一个新的对象去跟踪，添加新的监视器，但是这也会降低应用的性能。在添加之前应该仔细想一想有没有这个必要。
指令(Directive)的compile函数是在域被附加前操作DOM的完美功能（比如说绑定事件）。一个很重要的性能方面是，传入compile函数的元素和属性以原始html模板呈现。只会被运行一次，接下来会直接使用。另外一个重要的点是prelink和postlink的区别。prelink从外向内执行。postlinks从内向外执行。prelink性能稍好一些，因为它不会产生第二次更新周期。但是这时子元素的DOM还未被创建。
Angular提供了很多预定义的DOM事件指令。ng-click，ng-mouseenter，ng-mouseleave等等。当调用scole.$apply()时这些事件都会被执行。另外一种更有效率的方式是直接在DOM上面绑定addEventListener，并且尽量使用scope.$digest
ng-click and other DOM events
scope.$watch
scope.$on
Directive postLink
ng-repeat
ng-show and ng-hide
track by
oneTime bindings with ::
compile and preLink
$evalAsync
Services, scope inheritance, passing objects by reference
$destroy
unbinding watches and event listeners
ng-if and ng-switch
7 列表问题
7.1 长列表（Lists）
尽一些可能避免长列表。ng-repeat会进行了一些很重的DOM操作（更不用说对$$watchers的污染），所以无论是在分页或是在无限滚动中，尽量使用小型数据进行渲染。
7.2 过滤器(Filters)
要尽量避免使用过滤器。他们会在每个更新周期运行两次，每当发生任何改变时运行一次，另一次是收集更深层次的改变时触发。所以不要直接从内部列表中移除对象，使用CSS控制即可。（注* 用添加CSS类名去隐掉他们）
渲染时的 $index 值并不是真正的数组索引值，它豪无价值。但是排好序的数组索引，无法让你遍历到所有列表中的域。
7.3 更新 ng-repeat
当使用ng-repeat时要尽量避免对全局列表的刷新。ng-repeat会产生一个$$hashkey属性和一系统唯一的项。这意味着当你调用 scope.listBoundToNgRepeat = serverFetch() 时会引起对整个列表的重新刷新。会通知执行所有的watchers并触发每一个元素，这是非常消耗性能的。
这里有两种解决方案。一种是维护两个集合，和带有过虑器(filter)的ng-repeat(基本上需要自定义同步逻辑，因此算法更复杂，可维护性更差)，另一种方案是使用track by去指定你自己的key(Angular 1.2 开始支持，只需要很少的同步逻辑)。
总之：
scope.arr = mockServerFetch();
会比下面的这种慢
var a = mockServerFetch();
for(var i = scope.arr.length - 1; i >=0; i--){
var result = _.find(a, function(r){
return (r && r.trackingKey == scope.arr[i].trackingKey);
});
if (!result){
scope.arr.splice(i, 1);
} else {
a.splice(a.indexOf(scope.arr[i]), 1);
}
}
_.map(a, function(newItem){
scope.arr.push(newItem);
});
这种
<div ng-repeat="a in arr track by a.trackingKey">
比上面的慢些
<div ng-repeat="a in arr">
测试用例可以在这里 http://plnkr.co/qRlVT52vaMreEkXvhQ3B 找到
8 渲染问题
另一个引起Angular应用慢的原因是不正确地使用 ng-hide/ ng-show 或 ng-switch。
ng-hide 和 ng-show 简单地对CSS display属性进行切换。这意味着表面上看不见的东西其实还存在于域中， 所有的$$watchers还是会被触发。
ng-if 和 ng-switch实际上从DOM中完全移除了，相应的域也会被移除。性能差异显而易见。
9. 更新周期问题
9.1 绑定
尽量减少你的绑定。在Angular 1.3中这里有一个新的一次绑定语法，{{::scopeValue}}。它只会被域执行一次，并不添加到监视器要监视列表中（watcher array）.
9.2 $digest() 和 $apply()
scope.$apply 是一个强大的工具，可以让你向Angular引入外部的值。本质上它会触发Angular的所有事件（例如ng-click）。问题是scope.$apply会从根域$rootScope开始，遍历所有的域链，触发每一个域。
scope.$digest只会执行指定域及其相关的域。两种性能差异不言自明。折中的方案是，不触发任何域等到下一个更新周期再更新。
9.3 $watch()
scope.$watch() 已经在很多场景被讨论过的。基本上scope.$watch是不好的设计的一个标志。如果你非要创建一个观察者。记住对它尽可能地解绑。你可以用$watch的返回函数解绑。
var unbinder = scope.$watch('scopeValueToBeWatcher', function(newVal, oldVal) {
});
unbinder(); //这一行将watcher从 $$watchers 中移除。如果你不能早一点解绑，记住在 $on('$destroy') 中进行解绑。
9.4 $on, $broadcast 和 $emit
像$watch一样，他们都是一些很慢的事件，（有可能）遍历整个作用域。他们可能像GOTO一样，让你的程序无法调试。不过幸运地是像$watch一样，他们都可以在完全不需要的时侯解绑。比如在 $on('$destroy')中。
9.5 $destroy
像前面提到的那样，你应该在$on('$destroy')中解绑你所有的事件侦听器，取消任何$timeout的实例，或者任何其它异步执行的交互。这不仅仅是确保安全。还可以让你的域更快地被垃圾回收。不这样做，他们会一直在后台运行。直接你清空CPU和RAM。
另外，解绑DOM上的事件侦听器也非常重要，不这样做很可能在老式浏览器中引起内存泄露。
9.6 $evalAsync
scope.$evalAsync是一个强大的工具。它可以在当前域中执行，并不触发域的更新。evalAsync可以极大地提高你网页的性能。
10 指令问题
10.1 隔离的域（Isolate Scope）和Transclusion
域隔离和Transclusion是Angular最另人激动的特性，它们是Angular的核心组件。
但是这里也有一些权衡，指令不能直接创建一个替换他们父组元素的域。通过隔离的域或Transclusion我们可以创建一个新的对象去跟踪，添加新的监视器，但是这也会降低应用的性能。在添加之前应该仔细想一想有没有这个必要。
10.2 编绎周期
指令(Directive)的compile函数是在域被附加前操作DOM的完美功能（比如说绑定事件）。一个很重要的性能方面是，传入compile函数的元素和属性以原始html模板呈现。只会被运行一次，接下来会直接使用。另外一个重要的点是prelink和postlink的区别。prelink从外向内执行。postlinks从内向外执行。prelink性能稍好一些，因为它不会产生第二次更新周期。但是这时子元素的DOM还未被创建。
11 DOM事件问题
Angular提供了很多预定义的DOM事件指令。ng-click，ng-mouseenter，ng-mouseleave等等。当调用scole.$apply()时这些事件都会被执行。另外一种更有效率的方式是直接在DOM上面绑定addEventListener，并且尽量使用scope.$digest
12 摘要
12.1 AngularJS: 坏的方面
ng-click and other DOM events
scope.$watch
scope.$on
Directive postLink
ng-repeat
ng-show and ng-hide
12.2 AngularJS: 好的方面 (性能)
track by
oneTime bindings with ::
compile and preLink
$evalAsync
Services, scope inheritance, passing objects by reference
$destroy
unbinding watches and event listeners
ng-if and ng-switch
good
good