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(){});

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