1.更新UI的时间
angular进入脏检查循环,等待所有的model都稳定后,才批量一次性更新UI,这种机制可以减少浏览器渲染的次数,从而提高性能。
2.优化$watch注册的监视器
- 避免在监视函数中执行耗时操作,应为在每一次脏检查循环中都会被调用
- 避免在监视函数中操作dom,console.log,因为它很耗时。
- 使用ng-if而不是ng-show,前者会移除DOM和对应的监视器
- 即时移除不必要的监视器,unwatch()
- 避免深度watch,即第三个参数为true
3.digest
- $apply会进入脏检查循环,并从根作用域开始遍历(深度优先)检查数据变更
- digest可以稍微提升性能
4.优化ng-repeat
- 限制列表数量,使用分页和无限滚动
- 使用track by,angular会根据对应的值判断是否对原DOM进行更新,减少不必要的渲染
- 使用单次绑定,angular建议一个页面最多2000个双向绑定,使用单次绑定仅在第一次脏检查循环的时候改变界面元素{{::variable}}
5.慎用filter
在脏检查循环中,filter会调用多次,至少两次,避免在filter中执行耗时操作
可以在controller中预先处理:
//mainCtrl.js
angular.module('filtersPerf', []).controller('mainCtrl', function($scope, $filter){
$scope.dataList = $filter('double')(dataFromServer);
});