It’s said that necessity is the mother of invention – and the emergence of jQuery in the world of web development is a great example of this. The majority of JavaScript’s libraries were rolled out to improve the productivity and performance of web systems. Developers were having a hard time in dealing with compatibility issues between JavaScript and browser APIs in various web browsers, and jQuery emerged as a solution to this problem: an environment which enabled developers to smooth off the compatibility issues they faced and create code that worked for (almost) everyone.

jQuery is continuously developing and progressing with time. If this nimble and feature-rich JavaScript library is one of your major tools, then we hope you’ll find the following three workflow shortcuts very useful to boost the performance of your web applications.

Working with DOM in a Loop

One of jQuery’s best features is that it is able to manipulate the DOM by using a very small amount of code – it’s very easy to change things, and developers don’t even need to think what is going on behind the curtains. The following code shows a good example of appending nodes to an object named myDiv –

var myDiv = $(‘#emailList’);

for (var a = 0; a < 100; a++) {

myDiv.append(‘<div>’ + a + ‘</div>’);

}

We already know that this is a standard way to attach the nodes to the given parent. However, it is not an optimal approach, because jQuery has to continuously perform DOM operations within the loop. As the number of of loop iterations increases, performance gets weaker. If you want to have a high-performing algorithm that doesn’t compromise performance, you can opt for a more optimal solution to fix the child nodes. Like this:

var myDiv = $(‘#emailList’);

var resdiv = ”;

for (var a = 0; a < 100; a++) {

resdiv += ‘<div>’ + a + ‘</div>’;

}

myDiv.html(resdiv);

This code contacts the DOM only once after our loop has finished working. This leads to better performance and efficient functioning of the script.

Why use Classes, when we have IDs?

Most of the jQuery fans among you will already know that jQuery uses the browser’s native method, getElementByID() in order to get objects. However, when it comes to checking performance metrics, it can be more convenient to use a more complex selector, write your own elector or even define a container for the element which needs to be selected:

//This example simply creates a list, fills it with elements and selects each element only once

console.time(‘class’);

var mylist = $(‘#list’);

var elements = ‘<ul>’;

for (a=0; a<1000; a++) {

    elements += ‘<li class=”item’ + a + ‘”>item</li>’;

}

elements += ‘</ul>’;

mylist.html (elements);

for (a=0; a<1000; a++) {

    var s = $(‘.item’ + i);

}

console.timeEnd(‘class’);

console.time(‘id’);

var mylist = $(‘#list’);

var elements = ‘<ul>’;

for a=0; a<1000; a++) {

    elements += ‘<li id=”item’ + a + ‘”>item</li>’;

}

 elements+= ‘</ul>’;

list.html (elements);

 for (a=0; a<1000; a++) {

    var selection = $(‘#item’ + a);

}

console.timeEnd(‘id’);

This code shows the differences between the two ways of fetching and selecting the elements, describing an unlimited over-time (around 5 seconds) to load the class drive code.

The Return of the ‘False’!

Dealing with longer pages can be a pain when functions are developed without any “false” return statement. Remember that it’s always viable to use false whenever you use functions so that your browser doesn’t take you to the top of your webpage:

//This is your function without any return statement

$(‘#item’).click (function () {

   // add your code here

});

//This is how you should write your function i.e. setting the return statement to false

$(‘#item’).click (function () {

   // add your code here

   return false;

});

Of course, these are only three recommended shortcuts. Other options we’ll look at in future include using a CDN (Content Delivery Network) and loading your jQuery script from a regional server. If you’d like to discuss these more, and how we apply them in our work, contact us!