精华 [译]提高Ionic应用的性能
发布于 1年前 作者 stonexer 3549 次浏览 来自 分享

发表自:译 提高Ionic应用的性能

原文链接:Improving-the-performance-of-your-ionic-application,颇有删改,不对之处欢迎指正。

性能效果一直是Hybrid App最担心的问题,然而Ionic已经让我们看到hybrid app是有可能获得好的性能效果,但是有时为了让延迟卡顿的地方更顺滑,采取一些优化依然是必须的。

这篇文章会展示一些ionic应用中优化性能的技巧。

原生的滚动

这个实现可能会给你最高的流畅性加成。除了使用默认的Javascript的滚动,ionic提供了使用原生滚动的选择。

我们可以选择在每个view中开启它,在ion-content标签中放置这样的属性:

overflow-scroll="true"

或者可以对所有view开启它:

$ionicConfigProvider.scrolling.jsScrolling(false);

Crosswalk

Crosswork为App提供了一套Chrome Webview,获得了更好的性能效果和稳定性。

Ionic推荐在老版本的Android设备中(4.0-4.3)使用Crosswalk,然而我也发现即使是在更新的Android设备(4.3+)中,也能有巨大的性能提升。CSS动画的提升是最能感觉到的。

运行这条指令可以为我们的项目添加Crosswalk

ionic browser add crosswalk

如果体积上的增加成为了麻烦,crosswalk lite可能值得你考虑。它比正常Crosswalk项目的小一半,这也意味着它删除了一些功能:

  • 目前仅支持Android
  • 不支持更高级的特性比如WebRTC

使用GPU Hack

不用担心,只需要实现一些很小的hack。当使用CSS动画时,采用这两种方式:

-webkit-transform: translateZ(0);
-webkit-transform: translate3d(0,0,0);

这两条语句可以强制刘安琪创建一个新的图层并把渲染交给GPU而不是CPU。这有可能加速你的动画,但亲身测试是这里的关键。

Angular TemplateCache

Ionic默认已经有了一个缓存机制。在第一次进入view时才开始缓存。而使用Anguar TemplateCache可以让我们确保每个view在app载入时已经被缓存了。这也意味着在进入app时不需要更多的加载延时。

开启templateCache非常简单,首先我们需要安装 gulp-angular-templatecache 插件

npm install gulp-angular-templatecache -save-dev

然后我们要确保可以生成模板缓存

gulp.task('template',function(){
    return gulp.src(path.templates)
                .pipe(angularTemplateCache())
                .pipe(concat('templates.js'))
                .pipe(gulp.dest('./www/lib'));
});

然后还需要在index.html中加载模板文件

<script scr='lib/templates.js'></scirpt>

再为模板创建一个新的module

angular.module('templates', []);

最后一步是确保模板被Angular加载了,我们可以在angular module中添加一个依赖

angular.module('myIonicApp', ['ionic','templates']);

使用Ionic生命周期事件

你可能已经感觉到了某些卡顿和磕巴在跳转到另一个页面时。我们可以避免这种延时,通过在Ionic生命周期的事件中包装好数据。

假设我们需要加载一些职位信息,我们可以在beforeEnter事件中使用这个调用

$scope.$on('$ionic.beforeEnter', function()
{
    appointmentsService.getAllAppointments();
}

这个事件会在我们将要进入view时触发,使过渡动画时几乎没有卡顿。

总结

这篇文章向你展示了优化Ionic App性能效果的一些小窍门。但愿你的应用能因此有些提升!

2 回复

感谢分享。目前还有一些利用原生支持来提升性能的,比如通过plugin来实现原生的页面跳转等

为什么我无法生存缓存模板呢?

回到顶部