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:
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.
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.
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
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.
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
y properties at defined intervals).
The Mozilla Developer Network guide on CSS transitions can be found here.
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.
Below are some links for further reading on performance improvements in Cordova apps:
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:
Did you find this article helpful?
We're sorry to hear that! Feel free to email our team with your question.