How To Improve jQuery Mobile Performance
If your jQuery Mobile App seems slow to load and a bit sluggish then don’t worry, here are some tips that you can use to help improve the performance of your jQuery Mobile Appplication.
But First: What is jQuery Mobile?
jQuery Mobile is a Touch-Optimized Web Framework that works on top of the jQuery Library. jQuery Mobile is a HTML5-based user interface system designed to make responsive websites and apps accessible on all smartphones, tablets and desktop devices. jQuery mobile framework allows you to design a single responsive website or application that will work on all popular handheld devices.
Below are 8 useful tips to optimize the performance/speed of your jQuery Mobile App.
1. Update jQuery Mobile and jQuery to the Latest Version
Besides fixing bugs and adding new features, upgrading to a new version of jQuery Mobile and jQuery can help boost the performance of your application.
You have to be careful when upgrading though, because jQuery mobile and jQuery are different projects under development by separate teams. Always check the main jQuery Mobile website to see what version of jQuery works with the latest version of jQuery Mobile. And always, test your application after you perform the upgrades to make sure that you did not break an existing functionality in your App.
2. Use: preventDefault(); Or Use: return false;
The jQuery event API incorporates a method called, event.preventDefault(). The system can spend a lot of time bubbling through events; therefore, once your code has handled an event use event.preventDefault(); or return false; to stop the browser from also handling the event.
return false; Versus preventDefault();
return false; does 2 things:
- event.preventDefault(); – Stops the browser’s default behavior.
- event.stopPropagation(); – Prevents the event from propagating the DOM. Whenever an event happens on an element, that event is triggered on every single parent element as well.
preventDefault(); method does one thing: It stops the browsers default behaviour.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
//Or, depending on your use, you could use:
//return false;
});
});
</script>
</head>
<body>
<!-- preventDefault() method prevents the links below from following the URLs. -->
<div id="parent">
<p><a href="http://bacsoftwareconsulting.com/blog/">Go to Blog</a></p>
<p><a href="http://boutrosabichedid.com/">Go to Website</a></p>
</div>
</body>
</html>
3. Cache jQuery Selectors
Once you have used jQuery to find an element, store it in a variable since the next time around you don’t have to search the DOM for the same result again. That way the DOM doesn’t have to track down your element over and over again.
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. 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. Never select elements multiple times inside a loop. It would be a performance-killer!
//Instead of
$('#someid').css ('color', '#333');
$('#someid').html ('Hi!');
$('#someid').css ('background-color', '#fff');
// you could use jQuery chaining.
$('#someid').css('color', '#333').html ('Hi!').css('background-color', '#fff');
// OR save the results of the call to a variable
var item = $('#someid');
item.css ('color', '#333');
item.html ('Hi!');
item.css ('background-color', '#fff');
4. Combine and Minify Your Scripts for Production. But keep a formatted version for Development
Reduce Network Requests: To minimize http requests and optimize your Web Application’s performance, consider combining all your scripts into a single file. If possible, combine your CSS files into one and your JavaScript files into another file. Then use a compression tool, such as Packer, to compress the files. Smaller file sizes equal faster load times.
The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). — From YUI compressor, an excellent tool to minify scripts.
5. Put Javascript/jQuery Scripts at the Bottom of the HTML File
Normally you should put the JavaScript or the jQuery calls (script tags) before the closing </body> tag. The reason for that is you want, in most websites, your content and presentation to load first, and then your interactivity to load later. Because any JavaScript file that you call is going to have to be loaded and processed before anything else. With most websites, you want interactivity to load after everything else.
However, with jQuery Mobile, because it injects some HTML and CSS into your document, you may want the scripts for the jQuery mobile to load before and thus the need to put it at the top of the document (before the closing </head> tag) otherwise you may see like a little bit of a refresh.
So, as an exception to the rule, put the script tag for the jQuery file call at the top of the document followed by the jQuery mobile next (before the </head>). Then put any other scripts at the very end before the closing body tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section data-role="page" id="home">
<article data-role="content">
<!-- Stuff here -->
</article>
</section>
<script src="js/script.js"></script>
</body>
</html>
6. Dynamically Load the Header/Footer Toolbar
Instead of manually adding the same header/footer on every page, dynamically generate the header/footer toolbar using jQuery in your external script file and insert it into your page element.
7. Pre-Render your CSS Classes
Whenever possible, add CSS classes manually.
Instead of writing to your HTML:
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I am the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I am the collapsible set content for section 2.</p>
</div>
</div>
Figure out what classes are rendered and manually add them to your HTML. Like so:
<div data-role="collapsible-set" class="ui-collapsible-set ui-group-theme-inherit ui-corner-all">
<div data-role="collapsible" data-collapsed="false" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content">
<h3>Section 1</h3>
<p>I am the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content">
<h3>Section 2</h3>
<p>I am the collapsible set content for section 2.</p>
</div>
</div>
8. Use the Components You need and No more
If you use jQuery Mobile for building hybrid Apps, then you can remove the components that you don’t use. Removing them from the CSS and JS can easily improve performance. Include only what you need and and remove any unused code from the CSS. Also you can use a jQuery Mobile Custom Download Builder to select only the components you need for you Mobile app.
Conclusion
The 8 tips mentioned in this post should help you optimize the performance of your jQuery mobile application quite easily and efficiently. If you have other tips, please share them in the comments section. Your opinion matters, unless it is a Spam.
