angularjs和ionic性能优化（2）

angular 性能优化

1. 使用$watchCollection(obj, listener)，
   不要使用$watch()或者$watchGroup();

2. 使用one-time binding

   {{::user.first_name}}

3. 使用Track by
   以前的用法
   ng-repeat="user in users"
   修改后的用法
   ng-repeat="user in users track by user.id"如果users有id的话
   或者ng-repeat="user in users track by $index"如果没有id

4. 不要使用console.log(),而是用$log

   The $log service has several log levels .info .debug and .error.

5. 禁用dubug

   angular.module('yourModule').config(function($compileProvider) {
    if (/* test if in production */) {
       $compileProvider.debugInfoEnabled(false);
    }
   });
   

   AngularJS by default adds scope references to the DOM for tools such as angularjs-batarang to work. This has an impact on your application performance.

6. 使用lodash库的_.forEach遍历,他的效率是angular foreach的4倍。

7. 动画，参考这篇文章http://www.bennadel.com/blog/2935-enable-animations-explicitly-for-a-performance-boost-in-angularjs.htm。据说有显著提升

ionic性能优化

1. 使用原生滚动方式

angular.module('yourModule').config(function($ionicConfigProvider) {
    $ionicConfigProvider.scrolling.jsScrolling(false);
});

​ 参考:http://blog.ionic.io/native-scrolling-in-ionic-a-tale-in-rhyme/

1. 使用collection repeat

<ion-content>
  <ion-item collection-repeat="item in items">
    {{item}}
  </ion-item>
</ion-content>

参考:http://ionicframework.com/docs/api/directive/collectionRepeat/

1. 无限滚动

指令允许调用一个函数，当页面到底部或靠近底部的时候。

<ion-content ng-controller="MyController">
  <ion-list>
  ....
  ....
  </ion-list>

  <ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
  </ion-infinite-scroll>
</ion-content>

使用one-time binding,track by和native scrolling组合有最好的性能。

1. 缓存试图

   angular.module('yourModule').config(function($ionicConfigProvider) {
      $ionicConfigProvider.views.maxCache(5);
   });

   $stateProvider.state('myState', {
     cache: false,
     url : '/myUrl',
     templateUrl : 'my-template.html'
   });

   <ion-view cache-view="false">

2. 试图缓存事件

   $scope.$on('$ionicView.loaded', function(){});
   $scope.$on('$ionicView.enter', function(){});
   $scope.$on('$ionicView.leave', function(){});
   $scope.$on('$ionicView.beforeEnter', function(){});
   $scope.$on('$ionicView.beforeLeave', function(){});
   $scope.$on('$ionicView.afterEnter', function(){});
   $scope.$on('$ionicView.afterLeave', function(){});
   $scope.$on('$ionicView.unloaded', function(){});

   正确使用事件加载数据可以优化程序