Posted on by & filed under Content - Highlights and Reviews, Mobile Development.

There are times when jQuery Mobile can seem a bit sluggish. If this is happening to your app, don’t worry, there is help available. Here are some tips that can put a spring back into your app’s steps.

Upgrade jQuery Mobile and jQuery

Besides fixing bugs and adding features, upgrading and using a new version of jQuery Mobile and jQuery can help with your app’s performance. You have to be careful when upgrading however. jQuery and jQuery Mobile are separate projects under development by separate teams. Occasionally a breaking change may be introduced. For example, jQuery 1.7.2 is not compatible with versions of jQuery Mobile prior to version 1.1.

Don’t Use .live()

The .live() method of jQuery was seen as a godsend when it was introduced to the API in version 1.3. In a typical jQuery app there can be a lot of DOM manipulation and it can become very tedious to hook and unhook as elements come and go. The .live() method made it possible to hook an event for the life of the app based on its selector. Great right? Wrong, the .live() method is extremely slow. The .live() method actually hooks its events to the document object, which means that the event must bubble up from the element that generated the event until it reaches the document. This can be amazingly time consuming.

It is now deprecated. The folks on the jQuery team no longer recommend its use and neither do I. Even though it can be tedious to hook and unhook events, your code will be much faster without the .live() method than with it.

Use the Active Page

One of jQuery Mobile’s most compelling feature is its ability to have a lot pseudo pages loaded in the DOM at one time. This is great for performance since a server call isn’t always need to go from one page to the next, but it can also slow down how long it takes jQuery to find DOM elements specified by a given selector. By using the active page in the selector you narrow down the part of the DOM that has to be searched for a given element. It is specified by:

Use prevent default

Just because you’ve already handled an event doesn’t stop the browser from wanting to handle it too. The jQuery event API includes a method call, event.preventDefault(). It tells the browser not to bother executing its default behavior and this behavior can take a relatively long time to execute.

Cache selectors

This is one a lot of novice jQuery Mobile developers miss. Every time you call jQuery with a selector it returns the results of the call. Normally you chain the results to another jQuery method, but you can also save the results of the call into a variable. The results of caching is, the next time around you don’t have to search the DOM for the same results again. Now this only works for elements that are not being dynamically modified. If you change the DOM, you will have to re-cache the selector.

Summary

These are only a few tips and I am sure that there are a lot more out there. Hopefully these will help you to speed up your up your own jQuery Mobile app.

Safari Books Online has the content you need

Take advantage of these jQuery mobile resources in Safari Books Online:

Pro jQuery Mobile will teach you how to create themable, responsive, native-looking applications for iOS, Android, Windows Phone, Blackberry, and more.
jQuery Mobile provides a practical approach to using jQuery Mobile to quickly develop web-based applications for mobile devices.
jQuery Mobile First Look will show you the features of the jQuery Mobile framework, what they do, and how they can be used.
jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples is a practical “cookbook” packed with realistic, easy-to-use solutions for making the most of jQuery Core, jQuery UI, and jQuery Mobile.

About this author

A designer and developer of software since 1979, Troy began his career writing games in assembly and C. Since then he has written code in C++, C#, Objective-C, Java, JavaScript and even a smidgen of Python. Along the way, some of his titles have won awards, he became a Microsoft Certified Solution Developer, and in 2012, he won a developer challenge at a local Microsoft Windows Phone Unleashed event. His passion since 2007 has been mobile and mobile web development. In 2011, he joined the mobile development team at Kelley Blue Book. His small team is responsible for the KBB.com application for iPhone, Android, and Windows Phone 7 and the mobile versions of KBB.com. Troy also spends time talking to developer groups and maintaining his blog, The Rock n Coder.

Tags: jqm, jQuery, jQuery Mobile, tips,

Comments are closed.