Page 443 - AngularJS权威教程

32.4 优化$digest 调用 423

19
①
这个代码在Underscore.js 库中有一个可用于生产并经过良好测试的更优版本。

20
为了使用throttle函数设置$digest循环节流，你可以在事件循环中调用它：
// ...
for(var i = 0; i < events.length; i++) { 21
var event = events[i];
if(service.handlers[event])
for(handler in service.handlers[event]) 22
throttle(function() {
$rootScope.$apply(function() {
handler.apply(event);
}); 23
}, 500);
}
24
32.3 优化 ng-repeat
25
Angular中最大的延迟资源之一便是ng-repeat指令。对于每个ng-repeat所处的独立元素，
列表中每个条目都至少有一个数据绑定，这甚至还没有包括创建在列表元素内的任何其他绑定。
26
让我们来看看下面这个使用ng-repeat生成的重复列表的性能：

<ul> 27
<li ng-repeat="email in emails">
<a ng-href="#/from/{{ email.sender }}">
{{ email.sender }} 28
</a>
<a ng-href="#/email/{{ email.id }}">
{{ email.subject }}
</a> 29
</li>
</ul>
30
对于这个列表中每个独立的email，最少都有一个由ngRepeat指令生成的监控函数（这个监
控函数用于监控列表的变化）。由于Angular会为每个独立的ng指令创建一个$watch，上面的列表
中每个email都会有4+1个监控器。对于一个有100个email的列表，上面的用法就会创建500个监 31
控器，而上面这个例子甚至都不是一个复杂的完整页面。

对于这个相对简短的列表，很明显它会大大降低一个大型应用程序的性能。这里有一些相对 32
简单的方式可以用来加速你的应用程序。
33
32.4 优化$digest 调用

在改变一个变量时通常可以确定什么时候会运行$disgest循环，以及运行$digest循环会影 34
响哪些作用域。在这种情况下，你无需在$rootScope上使用$scope.$apply()（这会导致每个子
作用域 $scope跑进 $digest循环中）调用完整的 $digest循环。作为替代可以直接调用 35
$scope.$digest()。
—————————— 36
① http://underscorejs.org/