How to improve the performance of a jQuery mobile?

Most of the times people find themselves trapped when the performance of their jQuery mobile starts dragging. If the same is happening with your app, then you need to follow some techniques that will enhance the performance of jQuery mobile.

In this blog post, we will share some useful tips that will optimize the speed of your jQuery mobile app.

1. Update jQuery Mobile and jQuery with the latest version

With the release of every new version of jQuery mobile and jQuery, you will get various bug fixes and other speed optimization features that will boost the performance of your application. Therefore, it is necessary for you to run a regular update on your jQuery mobile application.

However, you need to be very cautious while upgrading your app because jQuery mobile and jQuery are different projects under development by separate teams.

For instance: the 1.7.2 version of jQuery is not compatible with the versions of jQuery mobile (till version 1.1).

2. Utilize prevent default

$(“button”, $.mobile.activePage).tap(function(event){

        var key = $(this).attr(“data-rockncoder-tag”),

            id = this.id;

        event.preventDefault();

        return false;

    });

The jQuery event API incorporates a method called, event.preventDefault(). It tells the browser not to worry about implementing its default behavior, and that particular behavior can take a long time to implement.

3. Don’t need to use .live()

The .live() method of jQuery was considered as a boon when it was introduced to the API in version 1.3. In fact, there are tons of DOM manipulations in the conventional jQuery that can be annoying when it comes to hook and unhook the elements.

With the use of .live() method, you can easily hook an event of the app based on its selector. But, by using this method, your app will get extremely slow. Usually, the .live() method hooks its events to the document object that means that particular event will pop up from the component that produced the event till it reaches the document and this process consumes a lot of time.

Therefore, it is better to avoid the .live() method if you want to boost the performance of your jQuery mobile app.

4. Cache Selectors

var $scalePic = $(“#scalePic”),
$panPic = $(“#panPic”),
$hiddenPic = $(“#hiddenPic”),

Every time when you call jQuery with a selector, it returns the call result. Usually, you can integrate the results to another jQuery method, but you can also save those results into variables. The results of caching save your time as you don’t need to search the DOM for the same result over and over again.

However, this will work only for the elements that are not being changed or modified. If you change the DOM, then you have to re-cache the selector again.

5. You can use Active Page

One of the amazing features of jQuery Mobile is that it has the ability to have an ample amount of spurious pages that are loaded in the Dom at one time. And this is incredible for performance as a server call is not always go from one page to the next.

However, it can slow down the speed when jQuery take time to find out DOM elements specified by a given selector. With the help of active page in the selector, you can cut down the part of the DOM that needs to be searched for a specified element.

Conclusion

With the help of these tips mentioned above in this blog post will help you optimize the performance of your jQuery mobile application quite easily and efficiently.