Visual Studio Home Visual Studio

Cordova performance tips

Updated: 9/10/2015

Cordova apps are web apps that run "inside" of native apps by using native "web view" UI components. There are therefore three major domains where performance can be affected in a Cordova app:

  • The web code, in JS, CSS, and HTML
  • The native code, in Objective-C/Swift, Java, or WinJS (Cordova plugin code).
  • The bridge between the native and web code (Cordova runtime code).

Optimizing web code, in JS, CSS, and HTML

There are very many things that can be optimized in a web app. The Internet contains a wealth of information on the topic. The optimizations that are highly relevant to Cordova apps appear below, but afterward we have a list of links for more in-depth reading.

Removing the 300ms Touch Delay

There is a 300ms delay on some mobile browser platforms between a touch on the screen and its corresponding touch event being raised. For more responsive UI, this delay can be sidestepped. The fastclick library (available on GitHub) conveniently implements this optimization.

Layout Updates: Fewer is Better

HTML rendering engines recalculate a document layout when CSS rules or DOM element dimensions are changed. These recalculations are expensive, and minimizing them improves performance. Editing HTML elements outside of the DOM (e.g. creating new <div>s using jQuery) does not cause layout recalculations. Therefore editing HTML in JavaScript and then inserting the edited HTML into the DOM results in fewer layout recalculations and leads to improved performance.

Images > CSS Gradients

CSS gradients take longer to render than static images on most HTML rendering engines. Using image gradient backgrounds in place of CSS gradients reduces frame render time.

Transitions > Setting Properties

CSS3 transitions allow animation and transformation of HTML elements. They are implemented and optimized in most browsers, and usually perform better than "manual" animations (such as setting object x and y properties at defined intervals).

The Mozilla Developer Network guide on CSS transitions can be found here.

CSS Animation Loop > Custom Animation Loop

Browser JavaScript APIs expose a function called requestAnimationFrame. This allows a callback to be attached to the rendering engine's frame-rendering loop, which is already optimized and timed appropriately for rendering. Using it (instead of a custom event loop) to perform any per-frame changes performs better because the browser's internal rendering code is already heavily optimized.

External Links

Below are some links for further reading on performance improvements in Cordova apps:

Improving native code, in Objective-C/Swift, Java, or WinJS (Cordova plugin code)

In a Cordova app, all code that will usually be written is in JS, CSS, and HTML. However, the source for native Cordova components (like the plugins and the runtime) is open, and it is within the power of an app developer to change it. Optimizing platform-specific code is outside the scope of this document, but many guides are available online for each platform supported by Cordova. They are as follows:

Navigating the Web-to-Native Bridge (Cordova runtime code)

Between the web code and native code is the Cordova runtime JavaScript and native code, which is also freely available and can be modified by any developer through the same process as is used to modify plugins. All Cordova repositories are available on GitHub under the Apache organization, prefixed with the string cordova-.

Did you find this article helpful?

Thanks!

We're sorry to hear that! Feel free to email our team with your question.


Want FASTER answers? Our team monitors a special StackOverflow tag here.