Performance has always been and still is the major concern of hybrid apps. Ionic however has already shown that it’s possible to make high performance hybrid apps, but there are sometimes still some optimisations necessary to smooth out any stutter/lag.

This post will show you some performance improvements I have learned when building Ionic applications.

Native scroll

This implementation will probably give you the most performance gain.
Instead of using the default Javascript scrolling, Ionic provides an option to use native scrolling.

We can enable it per view by placing following attribute on an ion-content tag

overflow-scroll=”true”  

Or we can enable it for all views

$ionicConfigProvider.scrolling.jsScrolling(false);

If you’re already using collection-repeat, you might want to consider replacing it with a normal ng-repeat. I’ve experienced some stutter when using collection-repeat in combination with native scroll.

Crosswalk

Crosswalk provides a bundled Chrome Webview with the app, resulting in better performance and predictability.

Ionic recommends using crosswalk for older versions of Android devices (4.0-4.3), but I’ve also noticed an enormous improvement in performance even on newer Android devices (4.3+).
This improvement was mostly noticeable on CSS animations.

We can add crosswalk to our project with this command

ionic browser add crosswalk  

If the added size is of an issue, crosswalk lite might be worth considering. This is only half the size of the normal crosswalk project.
This however means that they had to remove some features:

  • It’s currently Android only
  • It doesn’t contain the more advanced features like WebRTC

Using the GPU hack

No worries, it's only a small hack to implement. When using CSS animations, we have two possibilities to use:

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

What this does is force the browser to create a new layer and send the rendering to the GPU instead of the CPU.
This might speed up your animations, but testing is key here.

Angular TemplateCache

By default there is already a caching mechanism present in Ionic. This mechanism however only caches the view when it is first entered.
By using Angular TemplateCache we can make sure all views are already cached at app startup. This means no more initial lag when entering views for the first time.

It’s quite easy to enable templateCache, first we need to install the gulp-angular-templatecache plugin

npm install gulp-angular-templatecache –save-dev  

Then we make sure that it’s possible to generate the template cache

gulp.task(‘templates’,  function() {  
        return gulp.src(paths.templates)
                  .pipe(angularTemplateCache())
                  .pipe(concat(‘templates.js’))
                  .pipe(gulp.dest(‘./www/lib/’));    
} 

We also need to load the templates file in the index.html

  <script src="lib/templates.js"></script>

A new module for the templates should also be created

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

The last step is making sure the templates are loaded by Angular, we can make sure of this by adding a dependency for it in the angular module.

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

Using the Ionic lifecycle events

You might have experienced some lag or stutter when transitioning to another page. We can get rid of this lag by wrapping the data we want loaded in an Ionic lifecycle event.

Let’s say we want to load some appointments, we can wrap this service call inside the beforeEnter event

$scope.$on(‘$ionicView.beforeEnter’, function() {
        appointmentsService.getAllAppointments();
}

This event will trigger when we’re about to enter the view, resulting in almost no lag in the transition animation.

Conclusion

This article showed you some small tips to improve the performance of your Ionic app.
Hopefully this has helped you speed up your application.

Further reading

Great article on how to improve performance of AngularJS applications
https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications

Author image
Tom Buyse
My name is Tom Buyse. I work for Bewire in Belgium. My primary focus is front-end development, which currently mostly involves Angular, Angular 2 and Ionic.
comments powered by Disqus