AngularJS性能优化

几个概念

域$scope和更新周期DigestCycle

AngularJS的域本质上是一些JavaScript对象，它们从一些预定义的对象继承而来。基本上，小的域比大的域运行要快。

每创建一个新的域，都会给垃圾回收器添加更多待回收的内容。

每一个域都会存放一个由方法组成的数组$$watchers.

每当域中的一个值（属性）或绑定的DOM，如ng-repeat，ng-switch和ng-if等等，调用$watch时，一个函数（function）就会添加到相对应域中的$$watchers数组队列中。

当域中的值发生改变时，在$$watchers中所有的watchers函数都会被触发调用。并且当它们中的任何一个修改了域中的某个值时，它们会被再次触发执行。这个过程会一直循环下去直到$$watcher数组队列中不再做任何更改或抛出异常为止。

另外，如果任何代码执行$scope.$apply()，都会触发更新周期。

在设计AngularJS时应该遵守的一般准则

大型对象和服务器调用

我们要尽可能地简化我们的对象。当对象从服务器返回时，这一点尤为重要。

监视函数（watching functions）

不要将任何东西（ng-show、ng-repeat等等）直接绑定到一个函数。不要直接监视任何函数的返回值。该函数会在每个更新周期都执行，可能会降低你应用的速度。

监视对象 （watching objects）

虽然AngularJS提供了第三个可选参数来监视整个对象的改动--将调用$watch的第三个参数设为true。这是非常不好的想法，一个更好的解决办法是依靠服务和对象引用，监视域之间的变化。

需要注意的代码技巧

避免在循环内部调用函数

变量作用范围限制的越紧密越好，这样垃圾回收器可以更快回收空间。

可能的话，避免使用ng-repeat指令

合理利用一次性绑定机制

AngularJS最近的几次更新中引入了一个很有用的功能：一次性的渲染模板某些变量，并且它们不会受到未来Model变化的影响。这对于改善性能特别有用，一般情况，设置模板数据：

<i>{{tip}}</i>

使用一次性变量渲染语法则可以这样：

<i>{{ :: tip }}</i>

这样当AngularJS按常规处理完DOM和该变量后，他会在内部$$watchers的监控列表中删除这些一次性变量。

适当的直接操作DOM