$apply vs $digest
- $apply会使ng进入
$digest cycle
,并从$rootScope开始遍历(深度优先)检查数据变更。 - $digest仅会检查该scope和它的子scope,当你确定当前操作仅影响它们时,用$digest可以稍微提升性能。
参考《mastering web application development with angularjs》 P308
延迟执行
- 一些不必要的操作,放到
$timeout
里面延迟执行。 - 如果不涉及数据变更,还可以加上第三个参数false,避免调用
$apply
。 - 对时间有要求的,第二个参数可以设置为0。
$scope.name = data.name;
$timeout( (){
//do sth later,such as log
},153)!important; border:0px!important; font-size:1em!important; outline:0px!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:auto!important; line-height:1.1em!important; font-weight:bold!important; min-height:auto!important; background:none!important">false );
});
$evalAsync
vs$timeout
- http://stackoverflow.com/questions/17301572/angularjs-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进行更新,减少不必要渲染。
参见:http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by
使用单次绑定
我们都知道angular建议一个页面最多2000个双向绑定,但在列表页面通常很容易超标。
譬如一个滑动到底部加载下页的表格,一行20+个绑定,展示个100行就超标了。
下图这个只是一个很简单的列表,还不是表格,就已经这么多个了:
但其实很多属性显示后是几乎不会变更的, 这时候就没必要双向绑定了。(不知道angular为何不考虑此类场景)
如下图,改为bindonce或angular-once后减少了很多:
update:
1.3.0b10开始支持内建单次绑定,238)">{{::variable}}
设计文档:http://t.cn/RvIYHp9
commit:http://t.cn/RvIYHpC
目前该特性的性能似乎还有待优化(2x slower)
更多相关单向绑定的说明:AngularJS1.3中的单向绑定、一次性数据绑定(one-time bindings)
慎用filter
在$digest过程中,filter会执行很多次,至少两次。
所以要避免在filter中执行耗时操作。
参考《mastering web application development with angularjs》 P136
1 | angular.module('filtersPerf' 'double' (){ |
2 | return(input) { |
3 | //至少输出两次 |
console.log(
'Calling double on: '
+input);
5 | return input + input; |
7 | }); |
可以在controller中预先处理
//mainCtrl.js
($scope,$filter){
$scope.dataList = $filter()(dataFromServer); |