Jquery Mobile - Improve Performance

jQuery Mobile Performance Improvement

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:

 $.mobile.activePage.headerHeight = $("header", $.mobile.activePage).height();

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.

    $("button", $.mobile.activePage).tap(function(event){
        var key = $(this).attr("data-rockncoder-tag"),
            id = this.id;
        event.preventDefault();
        return false;
    });

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.

var $scalePic = $("#scalePic"),
    $panPic = $("#panPic"),
    $hiddenPic = $("#hiddenPic"),

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.

Source:

http://blog.safaribooksonline.com/2012/07/20/jquery-mobile-performance-improvement/