RSS

Tag Archives: Cordova

Top 10 Performance Techniques for Mobile Web Apps

Christophe Coenraets (Adobe technical evangelist) did a great talk on Top 10 Performance Techniques for PhoneGap Mobile Web Apps (link)

I thought I’d quickly outline the techniques discussed in his talk

#10 Don’t generate the UI at the server-side
– Create the UI in javascript at the client-side
– Insert views into- or remove from the DOM

#9 Don’t wait for the data to display the UI
– Perception management
– People will wait for data, not for UI

#8.1 Cache static data
– LocalStorage / SQLite

#8.2 Cache Dynamic Data
– Present cached data first, then
– update UI when requested data arrives

#8.3 Cache JS query selectors
– assign selectors to avoid traversing the DOM repeatedly
– Coding convention tip: prefix ‘$’ to selector variables e.g ‘var $backButton’

#8.4 Cache Precompiled templates

#7 Use CSS transitions with hardware acceleration
– (CSS) transform: translate3d()
– micro-library: https://github.com/ccoenraets/PageSlider

#6 Avoid ‘Click-Event 300ms’ Delay
– micro-library: FastClick : https://github.com/ftlabs/fastclick

#5 Use CSS Sprites
– ala Glyphicons

#4 Limit use of shadows and gradients

#3 Avoid reflow (re-layouts)
– Build UI off-DOM then apply

#2 Do you need that framework?

#1 Test. Test. Test
– Test with production data
– Test with many devices
– test with bad networks

Advertisements
 
Leave a comment

Posted by on June 4, 2013 in HTML5, Mobile, PhoneGap

 

Tags: , , , ,