13518219792
脏数据检查 != 轮询检查更新
谈起angular的 脏检查机制(dirty-checking) , 常见的误解就是认为： ng是定时轮询去检查model是否变更。
其实，ng只有在指定事件触发后，才进入 $digest cycle ：
创新互联于2013年开始，先为酒泉等服务建站，酒泉等地企业，进行企业商务咨询服务。为酒泉企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout , $interval )
执行 $digest() 或 $apply()
$digest后批量更新UI
传统的JS MVC框架, 数据变更是通过setter去触发事件，然后立即更新UI。
而angular则是进入 $digest cycle ，等待所有model都稳定后，才批量一次性更新UI。
这种机制能减少浏览器repaint次数，从而提高性能。
提速 $digest cycle
关键点
尽少的触发$digest (P310) 尽快的执行$digest
优化$watch
$scope.$watch(watchExpression, modelChangeCallback) , watchExpression可以是String或Function。
避免watchExpression中执行耗时操作 ，因为它在每次$digest都会执行1~2次。
避免watchExpression中操作dom，因为它很耗时。
console.log 也很耗时，记得发布时干掉它。（用grunt groundskeeper）
ng-if vs ng-show ， 前者会移除DOM和对应的watch
及时移除不必要的$watch。 （angular自动生成的可以通过下文介绍的bindonce ）
var unwatch = $scope.$watch("someKey", function(newValue, oldValue){ //do sth...
if(someCondition){ //当不需要的时候,及时移除watch
unwatch();
}
});避免深度watch， 即第三个参数为true
减少watch的变量长度
如下，angular不会仅对 {{variable}} 建立watcher，而是对整个p标签。
双括号应该被span包裹，因为watch的是外部element
plain text other {{variable}} plain text other
//改为:plain text other plain text other
//或plain text other {{variable}} plain text other
$apply vs $digest
$apply会使ng进入 $digest cycle , 并从$rootScope开始遍历(深度优先)检查数据变更。
$digest仅会检查该scope和它的子scope，当你确定当前操作仅影响它们时，用$digest可以稍微提升性能。
参考《mastering web application development with angularjs》 P308
延迟执行
一些不必要的操作，放到 $timeout 里面延迟执行。
如果不涉及数据变更，还可以加上第三个参数false，避免调用 $apply 。
对时间有要求的，第二个参数可以设置为0。
$http.get('http://path/to/url').success(function(data){
$scope.name = data.name;
$timeout(function(){ //do sth later, such as log
}, 0, false);
});$evalAsync vs $timeout
directive中执行的 $evalAsync ， 会在angular操作DOM之后，浏览器渲染之前执行。
controller中执行的 $evalAsync ， 会在angular操作DOM之前执行，一般不这么用。
而使用 $timeout ，会在浏览器渲染之后执行。
优化ng-repeat
限制列表个数
列表对象的数据转换，在放入scope之前处理。如$scope.dataList = convert(dataFromServer) 可以使用 ngInfiniteScroll 来做无限滚动。
使用 track by
刷新数据时，我们常这么做： $scope.tasks = data || []; ，这会导致angular移除掉所有的DOM，重新创建和渲染。 若优化为 ng-repeat="task in tasks track by task.id 后，angular就能复用task对应的原DOM进行更新，减少不必要渲染。
