Three Quick Performance Tips for PhoneGap and jQuery Mobile

For even more mobile performance tips – this time in JavaScript – check out my upcoming So Cal Code Camp Session: 5 Quick JavaScript Performance Improvement Tips.

PhoneGap when combined with jQuery Mobile sometimes exhibits sluggish performance. Here are three tips to improve its performance. I have tested these tips under iOS and Android, and they work. I am still trying to find more, but these should help for now.

Prevent Default Event Behavior
The system can spend a lot of time bubbling through events. Once your code has handled an event use both event.preventDefault(); and return false; to stop the system code from also handling the event. This is by far the biggest performance improvement that I’ve found. Adding these two statements to the event handler for the tap dramatically improved the performance of the JQMCalculator app from a previous tutorial.

https://gist.github.com/2994282.js?file=eventHandler.js

Cache jQuery Selectors
Searching the DOM is taxing. Once you have used jQuery to find an element or elements, store it a variable. By convention we begin a variable with a dollar sign, $, when it is holding the results of a jQuery selector.

https://gist.github.com/2994302.js?file=cacheSelectors.js

Narrow jQuery Selectors
Similar to the previous tip, searching the DOM is taxing, so make sure to search as little of it as necessary. Don’t search the entire document when all you are looking for lies with a

. When using jQuery Mobile, you can restrict the search to the active page by using $.mobile.activePage.

https://gist.github.com/2994309.js?file=narrowSelectors.js

With the variable $entryLine, we narrow the selector by restricting it to the active page. Remember: jQuery Mobile can have multiple pseudo-pages in memory simultaneously. Restricting the selector to the current page can eliminate a lot of unnecessary searching.
With the variable, $li, we do another form of narrowing. We search only the

  • tags which are descendants of id #paperTape. Id selectors are usually the fastest ones in jQuery since they translate directly into a JavaScript method, document.getElementById().
  • Summary
    Let me know if these tips help your app, and if you have some tips please share them. BTW: These tips will help even if you are simply using jQuery Mobile without PhoneGap.
    Advertisements

    5 thoughts on “Three Quick Performance Tips for PhoneGap and jQuery Mobile

    1. One question about narrowing down selectors let's say I have a page with an id of “page” and a form with an id of “form” and a question container with an id of “qc”

      Would a selector with “#page #form #qc” actually be narrower than just “#qc”?

      Like

    2. Hi Jesper,

      No it is quicker to just use the single #qc. The id selector is the fastest in jQuery since it maps directly to a JavaScript command, getElementById(). The getElementById only accepts one id, so having multiples will cause extra and unnecessary calls to be made slowing things down.

      Thanks for the question, be sure to visit the blog often since I write one or two new tutorials each week, and please follow me on Twitter @therockncoder – new tutorials announced there first.

      Like

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s