基于AngularJS/Ionic框架开发的性能优化

AngularJS做为强大的前端MVVM框架,虽然已经作了不少的性能优化，可是咱们开发过程当中的不当使用仍是会对性能产生巨大影响。

 

下面提出几点优化的方法：

1. 使用单次绑定符号{{::value}}

AngularJS的性能优化方法之一是减小双向绑定。咱们知道AngularJS的双向绑定是经过为每一个须要双向绑定的数据对象添加$$watchers,一旦某个scope的数据发生了更新，就触发脏检测($digest)，深度优先遍历全部scope对象的$$watchers值的old/new value是否发生变化。因此在开发过程当中，咱们都要当心判断建立出的每一个$$watchers是否有必要。对于只须要更新一次，之后无论数据层如何变化都不须要更新的数据，使用连续两个冒号便可在在$$watchers列表中将这个值删除，即减小了$digest脏检测循环。

2. ng-repeat优化

第一种方式虽然减小了脏检测的次数，可是单次绑定的数据毕竟少数，可能加完单次绑定，性能提高并无太大。若是咱们的代码中使用了ng-repeat,而且list数量很大时，咱们的性能会有很大降低，在移动端尤其明显。下面几点是对ng-repeat指令的优化。

• 使用limitTo来减小第一次加载列表元素的数量，以提升初始化页面的速度。咱们也许有上百上千条数据要显示，可是屏幕的大小毕竟有限，呈如今用户眼前的可能就是个1280x800或者360x640大小的屏幕，那咱们能够先加载用户所能看到几个十几个列表。limitTo属性就提供了这样的功能。

　　<li ng-repeat="mail in mails |limitTo:loadMailLimitTo"></li>

• 使用track by属性。好比咱们有下面一段代码

<ul>
    <li ng-repeat="mail in mails">
        {{mail.id}}:{{mail.title}}
    </li>
</ul>  

若是咱们想更新mails里面的值，咱们可能会这么作：

1	$scope.mails = newMailListFromServer;

上一行代码会告诉ng-repeat去删除掉全部的li元素，再去从新生成一套新的li，这意味着大量的DOM操做，尤为当li元素里面有 复杂的逻辑判断和双向绑定数据。这是由于ng-repeat在建立时会给每一个mail加上$hashkey属性，并时时跟踪，一旦mails元素替换成服务器 返回的对象，即时他们彻底同样，因为他们没有$hashkey,因此ng-repeat不会知道他们是同样的元素。而经过以下的改动：

<li ng-repeat="mail in mails track by mail.id"></li>

ng-repeat会跟踪咱们建立的mail.id去判断是否为新的元素。这样就减小了大量的DOM删减添加操做。
须要注意的是，若是limitTo和track by一块儿使用的时候，须要把track by放到最后，如

<li ng-repeat="mail in mails | limitTo:loadMailLimitTo track by mail.id"></li>

• 若是有引入ionic框架，可使用collection-repeat替代ng-repeat。

collection-repeat是ionic框架本身的一套显示list的指令，原理在于不论list有多大，页面最多只有必定数量的item,这个item数量的大小是经过屏幕高度和单个item的高度计算出来的。滑动列表时经过更新item元素的页面内容和位置来呈现全部的items。因此在大数量级的list呈现上，collection-repeat会比ng-repeat性能好不少。可是须要注意的是，因为collection-repeat是经过时时更新滑动位置的item内容来实现的，因此在item内部使用第一个方法的单次绑定方式，滑动后会形成页面混乱的状况。

 

3. 减小html页面中的filter

缘由是每当filter执行时，都会走两次$digest cycle，一次是scope中有数据改动，一次是查看是否有更多的改动须要更新数据。当数据量很大时对性能会有很大影响。咱们能够在初始化时就格式化好数据，好比赋值到view层以前，在咱们的js代码里使用angular提供的$filter provider来预处理咱们的数据。

 

4. ng-if替代ng-show/ng-hide

缘由是ng-if与ng-show/ng-hide的不一样之处在于，ng-if在等于false时会把元素从DOM中移除，因此全部绑在该元素上的handler会一同失效。而ng-show/ng-hide不会移除DOM元素，而是使用css style去隐藏/显示DOM元素，因此handlers会一直存在。

 

5. $scope.$apply()和$scope.$digest()

咱们会用到上面两种去执行一次脏检测，刷新页面数据。区别就是$scope.$apply()会从$rootscope开始，深度优先遍历执行$digest循环，而$scope.$digest会从当前scope开始，往下层scope遍历脏检测。若是只是指望当前scope的数据更新，而不涉及到parent $scope，则可使用$scope.$digest()。

 

6. angular animate

若是咱们的项目引入了angular-animate.js的模块，那么在大部分使用了指令的元素上，animate里面的代码都会被执行，无论当前元素是否有应用css动画样式。这对咱们页面上若是有大量数据频繁滑动，隐藏显示的时候会有比较明显的性能问题。若是咱们对当前scope并无渐入渐出等动画效果的时候，能够在当前scope初始化时加上$animate.enabled(false);固然，咱们也能够对某个元素进行禁止动画的动做：$animate.enabled(element, false);

 

7. ionicSlideBox优化（只针对使用了ionic框架的项目）

• 初始化slidebox时先初始化显示中间的首先显示在用户面前的slide，其余的slide能够在$timeout里面延迟初始化。思想和ng-repeat的limitTo比较相似。
• slidebox的滑动速度在ionic框架中默认速度是300ms滑完一个slide,经过改变这个速度来使滑动更快速。