{{'DESCRIPTION' | translate }}
我是一个刚接触AngularJs的新手(尽管我不是web开发的新手),所以请保持怀疑的态度来看这11条建议。我阅读了很多关于如何提升Angular性能的文章,下面就是我的相关总结。
内容列表:
- 最少化/避免 监听器(watchers)
- 避免使用ng-repeat。如果你不得不使用ng-repeat的话,请使用分页或者页面滚动。
- 如果可能的话,只绑定一次
- 用$watchCollection 替代 $watch(加入第三个参数)
- 避免使用重复的过滤器
- debounce ng-model
- 用ng-if 替代ng-show(但是请确认ng-if是否更适合你的项目)
- 用console.time来检测你的函数
- 用本地的JavaScript或者Lodash
- 用Batarang来检测你的监听器
- 用Chrome Timeline和Profiler 来寻找性能的瓶颈
1.最少化/避免 监听器(watchers)
- $scope.$watch
- {{}}绑定数据
- 大多数的指令(例如:ng-show)
- scope变量 scope:{bar:'='}
- 过滤器{{value|myFilter }}
- ng-repeat
- 用户操作(ng-click).
- ng-change
- ng-model
- $http 事件
- $q promise API
- $timeout
- $interval
- 手动调用$scope.apply和$digest.digest
2.避免使用ng-repeat。如果你不得不使用ng-repeat的话,请使用分页或者页面滚动。
3.如果可能的话,只绑定一次
4.用$watchCollection 替代 $watch(加入第三个参数)
5.避免重复的过滤器,并且缓存数据
$scope.description: $translate.instant('DESCRIPTION')
{{::description}}
{{step.time_modified | timeFormatFilter}}
- JavaScript
vartimeFormatFilter=$filter('timeFormatFilter');
step.time_modified=timeFormatFilter(step.time_modified);
- HTML
{{::Path.time_modified}}
6.限制ng-model更新频率(debounce ng-model)
ng-model-options="{ debounce: 250 }
7.使用ng-if替代ng-show(但是必须适合你自己的项目)
ng-show
会显示一个DOM元素,使用
display:none
可以隐藏它。
ng-if
会移除DOM元素,并且在需要它的时候,再重新创建。
8.使用console.time来检测函数
console.time
是一个非常好的API,并且我发现当测试Angular性能的时候,它非常有用。在我的代码里,我调用了很多这个函数,来帮助我确定我重构的Angular的性能。
https://developer.mozilla.org/en-US/docs/Web/API/Console/time
API这样使用:
console.time("TimerName");
//Some code
console.timeEnd("TimerName");
这是一个简单的例子:
console.time("TimerName");
setTimeout(function(){
console.timeEnd("TimerName");
}, 100);
//In console $: TimerName: 100.324ms
Note:如果console.time不能满足你的需求的话,你可以使用 preformance.now。如果你选择了这种方式,你必须自己写自己的方法。
https://docs.google.com/presentation/…
totalTime = 0; count = 0;
var someFunction = function() {
var thisRunStartTime = performance.now();
count++;
// some code
// some more code
totalTime += performance.now() - thisRunStartTime;
};
console.log("Average time: " + totalTime/count);
9.对于缓慢的js使用本地js或者Lodash(use native JavaScript or Lodash for slow JavaScript)
我们的应用已经使用了lodash,所有对我来说,不用再选择其他的了。如果lodash没有引入的话,我可能得要用js重写所有的事情。
在我的测试中,我只需要用lodash写一些简单的逻辑,就可以获得极大的性能提升。
Lodash的维护人员 John-David Dalton也是 https://jsperf.com/合作人之一,在性能提升方面有很大的成就,所有我信任他以及他的库。
10.使用Batarabg 来检测你的监听器(watchers)
Batarang是Angular团队开发的一个非常好的工具,并且在我的debugging工作中非常有用。它有很多的有用的功能,对我们性能有用的是性能tab页(performance tab)。
请确保下载的是稳定的版本:
https://chrome.google.com/webstore/detail/angularjs-batarang-stable/niopocochgahfkiccpjmmpchncjoapek
11.使用chrome的TimeLine 和 Profiler 来找到性能瓶颈
我认为我自己是一个chrome开发工具的忠实用户。在这个项目中,这两种工具都极其的有用。
Tip:如果你使用console.time API(#8),在你的TimeLine中这个时间区域将会被高亮。这样你就可以检测出你所关心的那块的时间。
https://developer.chrome.com/devtools/docs/timeline#user-produced-timeline-events
在TimeLine视图中,60fps线是起关键性作用的,当我启动我们的项目的时候,应用完全生成完毕要至少15秒,用户很难接受这样的应用。
经过性能优化,app完全渲染完毕不到2s(注意到时间范围不一样了),让用户感觉到很短的时间内就可以和UI交互。
原文地址:http://www.alexkras.com/11-tips-to-improve-angularjs-performance/#ng-repeat