What techniques can I use to make JS-heavy pages performant on mobile devices?

Question

I have a site that involves a large amount of JS code (~100K including jQuery). When I browse similar sites on my phone or tablet, I\'m usually disappointed at how sluggish they

Answer 1

Have a look at the following article I wrote on Javascript Performance Optimization Techniques.

For page load time on mobile devices the most relevant section is Managing and Actively reducing your Dependencies. Some techniques here are:

• Write code that reduces library dependencies to an absolute minimum.
• Use a post-load dependency manager for your libraries and modules.
• Minimize and combine your code into modules.

For UI responsiveness you want to focus on Reducing interaction with host (DOM) objects, and techniques around Maximising the efficiency of your iterations. Some key ones are:

• Keep your HTML super-lean (get rid of all those useless DIV and SPAN tags)
• Store pointer references to in-browser objects.
• Reduce calls to modify DOM to an absolute minimum, especially styling changes.

The other sections there are all useful around different aspects of creating an optimized and responsive UI. Hope you find them useful.