AngularJs优化小记
摘自各种资料总结比较有用的注意项
1、变量作用范围
把变量的作用范围限制地越紧密越好,js垃圾回收器可以更好的回收空间
function demo (){
var b="this is test";
return b;
}
当函数终止了,没有用到b的引用,b就会被回收,如果加了这个就会阻止垃圾回收。尽量避免这类的引用。
var cFunc=demo();
2、监视函数
不要将(ng-show,ng-repeat等)直接绑定到一个函数里。不要直接监视任何函数的返回值。该函数会在每个更新周期都执行,可能会降低你应用的速度。
3、尽量减少长列表
ng-repeat会进行一些很重的DOM操作($$wachers的污染更严重),所以无论在分页或者是在无限滚动中,尽量使用小型的数据进行渲染。
4、过滤器(FIiters)应该避免使用
要尽量避免使用过滤器。他们会在每个更新周期运行两次,每当发生任何改变时运行一次,另一次是收集更深层次的改变时触发。所以不要直接从内部列表中移除对象,使用CSS控制即可。(注* 用添加CSS类名去隐掉他们)
渲染时的 $index 值并不是真正的数组索引值,它豪无价值。但是排好序的数组索引,无法让你遍历到所有列表中的域。
5、渲染问题
使用ng-switch或ng-if代替ng-show/ng-hide,ng-if实际上可以从DOM中完全移除。性能比ng-show高。
6、更新ng-repeat的问题
避免全局列表的刷新,会消耗性能。两种解决方案:
- 维护两个集合,和带有过滤器的ng-repeat
- 使用track by 去指定你自己的key。(Angular 1.2)开始支持,只需要很少的同步逻辑,第1步需要复杂的算法和维护性差。
<div ng-repeat="a in arr track by a.tackingKey">
7、记得对$watch()等事件进行解绑
使用 on( destroy)解绑事件侦听器,取消任何$timeout的实例,或者其它异步执行的交互。确保安全,更快地被垃圾回收。不这样,一直后台运行,老式的浏览器会引起内存泄露。
8、 DOM事件问题
Angular提供了很多预定义的DOM事件指令。ng-click,ng-mouseenter,ng-mouseleave等等。当调用apply()时这些事件都会被执行。另外一种更有效率的方式是直接在DOM上面绑定addEventListener,并且尽量使用scope.$digest
9、$evalAsync事件
可以在当前域中执行,并不触发域的更新,可以极大的提高你网页的性能。
- directive中执行,会在angular操作DOM之后,浏览器渲染之前执行
- controller中执行,会在angular操作DOM之前操作,一般不这么做
- 而使用$timeout,会在浏览器渲染之后执行。
- 不必要的操作放在$timeout里面延迟执行,不涉及数据变更,可以加第三个参数false,避免调用apply。
10、 digest() 和 apply()事件
- apply() 是一个强大的工具,可以让你向Angular引入外部的值。本质上它会触发Angular的所有事件(例如ng-click)。
- 问题是apply()会从根域rootScope开始,遍历所有的域链,触发每一个域。
- $digest只会执行指定域及其相关的域。两种性能差异不言自明。折中的方案是,不触发任何域等到下一个更新周期再更新。