angular 性能优化

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

  2. 使用 one-time binding

    1
    {{::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

    1
    2
    3
    4
    5
    6
    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. 使用原生滚动方式
1
2
3
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
1
2
3
<ion-content>
  <ion-item collection-repeat="item in items"> {{item}} </ion-item>
</ion-content>

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

  1. 无限滚动

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

1
2
3
4
5
<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. 缓存试图

    1
    2
    3
    angular.module("yourModule").config(function ($ionicConfigProvider) {
      $ionicConfigProvider.views.maxCache(5);
    });
    1
    2
    3
    4
    5
    $stateProvider.state("myState", {
      cache: false,
      url: "/myUrl",
      templateUrl: "my-template.html",
    });
    1
    <ion-view cache-view="false"></ion-view>

  2. 试图缓存事件

    1
    2
    3
    4
    5
    6
    7
    8
    $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 () {});

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