ionic的性能优化和ionic-native-transitions插件的参数调优等

在ionic1中性能是瓶颈但经过优化后，性能堪比原生。当然前提条件是需要说明一下的：首先，性能直接体现在安卓系统上，然后就是安卓系统版本问题，在4.4版本前后是一个分水岭。经过优化后，安卓4.3的机器也可以完美运行，当然会在一些机型上出现bug, 但也可经cordova插件中通过对系统机型的判断针对性解决问题。这里需要强调一下, 首先是ionic1中的问题，因为在这里问题比较多，需要详细记录下。在ionic2和3中,性能比1好了不少，关于转场插件, 用的是NativePageTransitions,当然ionic1中使用的ionic-native-transitions也是基于这款插件的的。

基于NG1的性能优化

• 数据绑定减少双向绑定的使用
• 避免直接操作dom
• $scope相关优化和定时器等耗性等方面的优化
• ng-repeat 等 相关优化
• 减少过滤器的使用
• 基于ionic的视图事件的相关优化
• 减少对$rootScope的使用
• 其他优化，网上很多，这里不再赘述。

ionic-native-transitions插件的参数调整

主要代码如下：

.config(function ($ionicNativeTransitionsProvider) {
            var transOption = {
                duration: 300,
                slowdownfactor: 10,
                androiddelay: -1,
                fixedPixelsTop: 0,
                fixedPixelsBottom: 0,
                backInOppositeDirection: false
            };

            var defaultTrans = {
                type: 'slide',
                direction: 'left'
            };

            var backTrans = {
                type: 'slide',
                direction: 'right'
            };

            function setAndroidTrans(){
                $ionicNativeTransitionsProvider.setDefaultOptions(transOption);
                $ionicNativeTransitionsProvider.setDefaultTransition(defaultTrans);
                $ionicNativeTransitionsProvider.setDefaultBackTransition(backTrans);
                $ionicNativeTransitionsProvider.enable(true); // Enable plugin and disable ionic transitions
            }

            ionic.Platform.isAndroid() ? setAndroidTrans() : $ionicNativeTransitionsProvider.enable(false);
})

说明，此插件经历了很多maintainers，也是各种bugs在各种机型上层出不穷，很多issues也在不停的解决中，新的issues也一直被提出。开源就是这样，改善需要一个过程。经过多次实验，我整理出了上述的transOption中的参数，没有完全按照github上的文档上的参数来做（其中省略了不少没必要加的参数）在很多机型上运行都很Ok.

统一平台配置文件的处理

关键代码如下：

.config(function ($urlRouterProvider, $httpProvider, $ionicConfigProvider) {
            $urlRouterProvider.otherwise('/tab/home'); // 默认路由
            $httpProvider.interceptors.push('authInterceptor'); // 设置拦截器
            ionic.Platform.isFullScreen = false; // 禁止全屏显示

            $ionicConfigProvider.views.maxCache(15);
            $ionicConfigProvider.views.transition('platform');
            $ionicConfigProvider.views.forwardCache(true); // 缓存下一页
            $ionicConfigProvider.views.swipeBackEnabled(ionic.Platform.isIOS());
            $ionicConfigProvider.spinner.icon('ios');

            // 通用样式的兼容
            $ionicConfigProvider.platform.android.tabs.position("bottom");
            $ionicConfigProvider.platform.ios.tabs.position("bottom");
            $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
            $ionicConfigProvider.platform.android.navBar.alignTitle('center');
            $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-left');
            $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-ios-arrow-left');
            $ionicConfigProvider.tabs.style('standard');
            // false 默认所有的滚动使用native，会比js的滚动快很多，并且很平滑 ; 安卓使用,ios不使用
            $ionicConfigProvider.scrolling.jsScrolling(!ionic.Platform.isAndroid()); 

})

此处提一下，针对action-sheet不同平台的样式不同的解决方案，简单暴力，直接注释掉ionic css 源码中的相关样式 搜索关键字为: .platform-android .action-sheet 找到他们把他们注释掉!

CrossWalk的使用

关于crosswalk，如果想追求卓越体验，可以考虑加入这个，不过app体积可能要增大20M, 使用方法不再赘述。不过官网论坛上说ionic1.4会集成crosswalk webview进去，不过目前应该把精力放在ionic3和ts上去。ionic1 和 angular1 将会成为前端潮流中的历史。