5 Ways to Speedup HTML5 Mobile Apps using Built-in Functions
Mobile web browser and native "WebView" classes (used by hybrid apps) contain various built-in functions that can be used to increase HTML5 mobile app performance. Here are a few of them:

Canvas tag

The canvas tag is used to specify graphics commands which are rendered by the browser. Canvas can also be used to render other content, including text. For pages that contain a large number of objects, consider using the canvas tag.
For more on canvas performance see HTML5 Rocks


There are several benefits of using CSS in addition to its primary function of separating page content from presentation. First, CSS classes can be used to define an entire theme, so the theme can be changed with one or a few lines of code ('element.className=new-class-name'). This behaviour is the same as with normal web apps. But in addition, many devices are now processing CSS with hardware acceleration, which can easily improve performance by a factor of 10 or more. So, some of the advanced CSS properties (e.g. translate3d) can now be computed very quickly. This makes it possible to add special effects without degrading rendering performance.

DOM changes

Clustering a large number of DOM changes together can reduce the number of times a page must be re-rendered. Since user response may be degraded or suspended while rendering, it should be avoided whenever possible.


It is often faster (and sometimes more convenient) to build HTML strings with JavaScript and use innerHTML to update a page, rather than creating and modifying individual DOM nodes. This is especially true if a page is initially created with HTML (or an HTML template) rather than built from a set of DOM nodes.

Single page design (hash tag)

Many HTML5 mobile apps are 'single-page' or re-use each page heavily by organizing the page into sections and modifying certain sections, rather than loading a new page each time a section changes. This avoids a round trip server delay due to page reloading. Since page navigation can be accomplished using the URI hash tag ('#'). Browsers (or WebViews) do not change URL location when the contents of a has tag are modified.
It is often faster (and sometimes more convenient) to build HTML strings in JavaScript and then set the innerHTML tag to the result. This is particularly true if HTML (or HTML-based templates) are used to initially construct a page instead of pure JavaScript.