Home » Tutorials » JavaScript » Optimize HTML5 Web App’s jQuery Performance

Optimize HTML5 Web App’s jQuery Performance

Optimize HTML5 Web App’s jQuery Performance

“You are losing users & probably money if your web app is slow!”

In this article, we’ll cover the jQuery’s performance tips for high speed HTML5 Web App.

jQuery Performance 1 :
Always Keep Your jQuery Library Up-to-date

Always use the latest up-to-date version of jQuery core library. If your existing HTML5 website / WebApp already have jQuery library, then please remember to update it where possible. This is because jQuery’s performance improvements & usually publish in the major release 1.x (example: 1.10, 1.11, 2.0), while bug patches & minor fixes was land in 1.x.y (example: 1.11.1)

Still convinced? Take a look on the comparison result between each version of jQuery core library here: Speed comparison of latest jQuery versions 1.6-2.1

Upgrading jQuery core library is pain free process! So, remember to keep your HTML5 WebApp’s jQuery library up-to-date to enjoy the benefits of the performance improvements!

Note: Be aware, some jQuery method may deprecated in the newest version of jQuery library, always check the release logs from the jQuery official website before upgrading your jQuery!

jQuery Performance 2 :
Use Fastest Selector Where Possible

Do you know which selector is the fastest in terms of performance?

  • 1. $(“#container”);
  • 2. $(“form”);
  • 3. $(“.classname”);
  • 4. $(“:hidden”);
  • 5. $(“label[for=’name’]”);

The answer is ID & Elements Selector. The ID & Elements Selector always the fastest, because it’s backed by JavaScript’s native operation – getElementById(). Example:

$("#container");
$("form");
$("input");

The second fast will be the Class Selector:

$(".classname");

then followed by the slowest, Pseudo & Attribute Selector:

$(":hidden");
$("label[for='name']");

jQuery Performance 3 :
Caching Your Selector

If you are going to use the same selector more than 1 time, then you should cache your selector for later re-use. If you didn’t cache your selector and each same selector $(“.container”) will search through the DOM tree again and again to return the collection, at the end your Web App will respond much more slower compare to the Web App with selector caching. Following is the example of selector caching:

var container = $(".container");
var child    = container.find('child');

jQuery Performance 4 :
Traversing Down the DOM Tree

jQuery has 2 built in methods to allows you to traversing down the DOM tree. These 2 methods are:

  • find()
  • children()

You should always use these 2 built-in methods to traversing down the DOM tree & to avoid select child element in the way shown at below, which is not a good practice! This will slow down the performance:

$("#div > .child").addClass("test");

$("#div .child").addClass("test");

The above code shows that we select an element using CSS Child Combinator Selector & Class Selector. Using these 2 selectors, however it works from right to left, which means that jQuery will check .child element before checking its parent & it is about 70% slower than using find() & children() method.

jQuery Performance 5 :
Chaining

Chaining allow us to chain multiple jQuery methods all together with a single declaration. By doing this, the code is just run once and allows multiple actions to be executed on it. The best performance of chaining is used it together with Caching that we mentioned just now.

// Fastest, Chained and Cached
var d = $('#theDiv');
d.addClass('test').show();

// Fast, Chained Without Cached
$('#theDiv').addClass('test').show();

// Slow, No Chained and No Cached
$('#theDiv').addClass('test')
$('#theDiv').show();

jQuery Performance 6 :
Avoid DOM Manipulation Where Possible

DOM manipulation is extremely expensive! Every time when you’re manipulating the DOM Tree, by inserting, deleting DOM nodes will triggers a process called Reflow. Reflow is a process to re-calculate the position of elements that appear in DOM and re-draw the layout again on screen. The most common case that we manipulating the DOM was “append()” method:

var parentDiv = $('#emailList');
for (var i = 0; i < 100; i++) {
    parentDiv.append('<div>' + i + '</div>');
}

Looks familiar? This is usually how we manipulating the DOM via looping. Although it works fine, it’s not optimal because jQuery has to constantly perform DOM operations in the loop. You may not notice a problem when looping through only few items, but as the number of looping increases to a larger number the performance can start to degrade. Applying multiple append() method can be up to 90% slower!

In order to improve the performance while manipulating the DOM, the only way to do that is to minimize the usage of append(), insertBefore(), insertAfter() & etc. Following is the efficient way to write our code for improvement:

var parentDiv = $('#emailList');
var divs = '';
for (var i = 0; i < 100; i++) {
  divs += '<div>' + i + '</div>';
}
parentDiv.html(divs);

The code above only manipulate the DOM once after the loop has been completed. This is much more efficient than calling append() multiple times.

Other than this, jQuery has introduced “detach()” method to help in addressing DOM’s performance issue, allowing us to temporary remove an element / node from the DOM while we work with it & re-insert node into the DOM once ready:

var list = $("#emailList");
var parent = list.parent();
 
list.detach();
for (var i = 0; i < 100; i++) {
    list.append('<div>' + i + '</div>');
} 

parent.append(list);

jQuery Performance 7 :
Use Native JavaScript Loop Where Possible

Native JavaScript comes with “for” & “while” loops, which are more faster than jQuery $.each() looping. Here is the result of comparing between Native JavaScript Loop & jQuery $.each() Loop. As you can see from the result, the jQuery $.each() Loop is 80% slower than Native JavaScript Loop. So for better performance, use Native JavaScript whenever possible.

There are 1 more things to remember is, only use Loop when you really need it and use it on demand.

Conclusion

You are losing users and probably money if your website & web app doesn’t quick enough. Website / web app should run & perform faster on any devices either on desktop or smartphone. We should always follow the industry’s approach when we building website & web app. If we don’t follow the best practices, our users’ browser end up having to do more work. More work means consuming our users’ device’s memory usage, end up we’re losing our customer & money.


Android, iOS Development Tutorials