Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Optimizing front-end performance by using jQuery

Learning the performance improvement techniques are very important for the developer community. In this tutorial, we take a look at how one can possibly maximize performance when scripting with jQuery.

Developers, who have used jQuery for scripting work, undoubtedly know the extra features that it can bring to the table. In fact, jQuery goes out to extend on several features that JavaScript wouldn’t normally offer. However, while these certainly have numerous advantages, they also can be a problem for developers, as they often raise several performance issues. So, this article is all about how you can keep jQuery projects integrated, such that they don’t end up being bloated during the development phase. Sometime people think that jQuery and JavaScript are similar but they are significantly different. So, our first step would be to know a little bit on jQuery itself. After that we will look into different techniques in details to understand the performance improvement points.

So, what is jQuery?

JQuery happens to be a JavaScript library that is mainly used for scripting HTML on the client-side. But jQuery is different from JavaScript in its usage and implementation. And, at the same time it is easier to implement as we do not need to work on the low level JavaScript details. It comes with packages for different functionalities, so the developers can use those packages and call specific functions to achieve their common goals. If we need some manipulation in the lower level scripting for achieving some specific and unique tasks then the developers need to understand the implementation and do the modification. But in most of the cases it can be done by using packages and functions only.

JQuery belongs to the open-source community and it is compatible across several platforms. The jQuery library consists of several contributions from developers across the globe and all of that can be used to add functionalities for free. Most of the jQuery implementations in large applications are customized as per requirement. So there are different versions available, and can be used as it is.

As a result of this, jQuery happens to be extremely easy to access and use in development work.

Now that we know what jQuery is, we shall check out some of the ways one can optimize performance levels when using the scripting library.

Loading CDN-hosted jQuery

Considering the fact that jQuery happens to belong to the open source community, there are always different versions available that works as per certain projects. Generally, a company like Google would do this, as it looks for a specific CDN (content delivery network).

Now, if you happen to be working on a project that is similar, always look out for a version of jQuery that is geared towards it. The result will be faster load times and better performance. In the following image, we can see the CDN usage by different jQuery sites like Google, Microsoft etc. And it is a clear evidence of jQuery implementation by the big players in the market.

Optimizing front-end performance by using jQuery

Figure 1: Showing CDN usage by popular JQuery sites

DOM should not be modified into a loop

Updating of the DOM (Document Object Model) is generally considered to be a very good thing, and can be done with jQuery and JavaScript. However, modifications to it can also be pretty deceiving as they tend to consume a lot of resources, which further mean a drop in the performance rates. Also, make sure that the DOM is never modified into a loop, and even if its modification is necessary, look to append it after the loop. So the result is, parse the DOM inside a loop but do the updating or modification outside the loop. It consumes less computing resource and performs better. Developers should be careful in this area as DOM modification is a very common task in most of the applications.

Stay updated on the latest

This is probably one of the most obvious things to do. jQuery has a large contributor base, just as much as its user base and therefore, it also in a state of constant development.

As a developer, it is best to always stay updated with the latest updates to jQuery. This is because every version offers improvements in performance and bug fixes that can aid in the improvement of performance. So, the use of the latest version of jQuery always improves performance automatically without putting any effort from the application development side.

Prioritizing content

When working on a project, very often, one tends to ignore certain very minor things that can go a long way in affecting performance. One of the best ways out of this is to prioritize everything correctly, such that it doesn’t make a big difference for an individual line of code, but in the long run of the project at hand.

Combining and minifying scripts

Most browsers work with just one script at a time and are unable to process many of them at the same time. Thus, they stack them in a queue, which further results in an increase in the load time.

To avoid this, you can out the scripts of all your pages on a single file and then compress them using a compression tool. This way the size of the resultant file will be less, thereby speeding up the load times.

Use ID for selectors

Internet browsers are known to natively support getElementByID method by themselves. This also points out that when one assigns jQuery resources using their ID, it also happens to be the faster method for selecting them.

So, what you can do is basically ditch the totally handy class selection technique and use a complex selector, specify a container for the element or even write your very own selector.

Listing 1: Selecting each item after creating a list

// Example that creates a list and then fills it with items and, selects each item once
var listing = $('#listing');
var item = '<ul>';
for (a=0; a<1000; a++) {
    item += '<li class="item' + a + '">item</li>';
item += '</ul>';
listing.html (item);
for (a=0; a<1000; a++) {
    var t = $('.item' + a);
var listing = $('#listing');
var item = '<ul>';
for (a=0; a<1000; a++) {
    items += '<li id="item' + a + '">item</li>';
item += '</ul>';
listing.html (item);
for (a=0; a<1000; a++) {
    var t = $('#item' + a);

The given code shows how two different ways of selecting elements differ from one another.

Making use of the promises interface

Both, JavaScript and jQuery, are very flexible. This says that there basically aren’t any hard rules that one needs to abide by. While this may be seen as a boon by many, it can in fact, be pretty problematic because the code tends to get messy.

To avoid this and go about writing good code, you can use the promises interface, which basically allows you to structure and organize all your jQuery code in the right way.

Always cache your objects

In case you need to use your elements more than just once, it is very important that you cache the objects. When an object is cached, it becomes easily accessible to the command structure. So, the DOM knows exactly where it needs to look to find the elements and does not have to track the element down every time.

Listing 2: Showing caching sample

$('#item').css ('color', '#123356');
$('#item').html ('Hello!');
$('#item').css ('background-color', '#ffffff');
// you can use this rather
$('#item').css ('color', '#123356').html ('Hello!').css ('background-color', '#ffffff');
// or rather
var item = $('#item');
item.css ('color', '#123356');
item.html ('Hello!’);
item.css ('background-color', '#ffffff');
// for loops, this is not what you should be doing
console.time('no cache');
for (var a=0; a<1000; a++) {
    $('#list').append (a);
console.timeEnd('no cache');
// a better way
var item = $('#list');
for (var a=0; a<1000; a++) {
    item.append (a);

The above code can clearly show the results of caching, even when iterations made are short.

Making use of chaining

When you happen to reference a selector several times in one row, there is a better alternative method of doing that. Making use of a chaining command that aggregates all similar commands can be the brighter and cleaner option to look forward to. It also speeds up the command on the whole.

Providing selectors with a context

We have already referred to how the use of IDs or tags instead of classes can be the ideal way to makes things faster. But, the truth remains that these processes do end up traversing the DOM. So, a way out is to focus on a certain region you may be aware of that requires access.

Data storage

Avoid the storage of data in the DOM itself. Rather, you might want to store the content in jQuery, as it is the preferred option. This method allows you to associate the data that is required with its related element, which leads to a speed up in the process.

Use for, not each

Native functions are always known to run faster than those that are helpers. You can make use of Firebug to get an idea of the time each function takes to run.

Listing 3: Measuring for and each loop

var arr = new Array ();
for (var j=0; j<10000; j++) {
    arr[j] = 0;
var k = arr.length;
for (var j=0;j<k; j++) {
    arr[j] = j;
$.each (arr, function (j) {
    arr[j] = j;

The results from the above show that it takes 2ms for native code, and 26ms for jQuery’s each method.

Lazy loading

The lazy loading feature that is available with jQuery allows you to define which content needs to be loaded at a certain point of time. As such, this can allow you to save plenty of time on several aspects. Just make sure that you do not forget to include the jquery.lazyload.js file in your project if you plan on implementing it somewhere in your project.

Use join() rather than String concat() for long strings

The use of join() over concat() actually speeds things up, especially when we are dealing with long strings of text that requires joining.

You can first create an array and then fill that up with what you need to join together. This method gives faster results than the concat() method.

Listing 4: Use of join() sample code

var arr = [];
for (var j=0; j<=10000; j++) {
    arr[j] = '<li>'+j+'</li>';
$('#list').html (arr.join (''));

Optimizing front-end performance by using jQuery

Figure 2: Showing ‘String’ performance by different constructs (browser wise)

Pre-loading of images

Load times can be increased when you pre-load images. Rather than having to download the image each time it is selected, you can have it already loaded up, as that fastens the entire process. However, it is also worthy to note that this isn’t something that you over implement.

Use ready events only when necessary

The use of ready events can really hog up processing speed, as it keeps objects readied and occupying a lot of space. An alternative way would be to ready once the DOM is loaded.

Returning False

You might have noticed how you jump to the top of the page when your methods do not return false. Also, this can be specifically annoying when you are working with pages that are long.

So, a way out of this would be to write –

$('#item').click (function () {
// content here
return false;

rather than,

$('#item').click (function () {
// contents here


This article explains some very interesting tweaks which can help you achieve better performance when making use of jQuery for development. Some of these are also more a common thing to do while others really offer alternative methods to accomplish the same tasks. Most of the techniques are more or less programming tasks and it can be achieved by following best practices. We have also shown the performance improvement areas which are simple but useful. Hope developers will be able to use these techniques to improve their application performance.

Website: Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login