AngularJs优化小记

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的问题

避免全局列表的刷新，会消耗性能。两种解决方案：

1. 维护两个集合，和带有过滤器的ng-repeat
2. 使用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只会执行指定域及其相关的域。两种性能差异不言自明。折中的方案是，不触发任何域等到下一个更新周期再更新。