I recently spent a few days investigating sluggish performance (particularly slow navigation) on an HTML5 / JavaScript based mobile application. Below is list of the main takeaways from the exercise:
- If necessary, use libraries that result in faster touch events on mobile e.g. FastClick library to eliminate 300ms click delay between tapping an element on a screen and the corresponding click event being fired
- Implement lazy loading for lists and tables (most HTML5 / JavaScript libraries have support for this on the respective List / ListView component)
- Minify JavaScript and CSS
- Where possible, consider async load of required resources and libraries e.g. SAPUI5’s preload config option
data-sap-ui-preload="async" - Reduce the number of DOM elements
- Take care not to write code that blocks the UI thread – keep an eye out for nested loops on navigation etc
- In situations where heavy lifting by code is unavoidable, implement a splash screen, spinner or some form of feedback so the user is aware that something is happening
Happy coding!
Footnotes
- Thanks to Tamiswanashe Chipika for the additional takeaways below:
- Smart use of caching server side responses makes the reduces the network round trip penalty in some cases
- Offline first approach (supported by a client database of some kind – RealmDB is a good cross platform choice) so that your app doesn’t depend on a network connection to be functional
- Also related to offline first – optimistic writes (update the UI before success responses are received from the server)
- Smart choice of CSS frameworks. Some are better for mobile than others