performance

Cordova Performance Tips

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)

Web App Domain

There are very many things that can be optimized in a web app. The Internet contains a wealth of information on the topic. Optimizations highly relevant to Cordova apps are given 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 fired. 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 minimising 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 than static images to render 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 is more performant 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:

• Christophe Coenraets' PhoneGap Performance slides
• Ryan Salva's Cordova Performance presentation

Native App Domain

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:

• [Amazon FireOS] perf_amazon_fireos
• [Android] perf_android
• [BlackBerry 10] perf_blackberry
• [iOS] perf_ios
• Tizen
• [WinJS] perf_winjs
• Browsers: Chrome, Firefox, Safari, Opera

Web-to-Native Bridge

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-.