Valerii Iatsko

Full Stack Developer

Hi! My name is Valerii Iatsko.

I'm a Full Stack Developer and the author of this blog.

→ Follow on Twitter

10 jQuery Performance Tips & Tricks

jQuery is still relevant in 2016. Mostly because it’s still the easiest way of creating highly-compatible websites. Without it, it’s much harder to figure it out of how to write code which will work seamlessly in every browser and to fix all related bugs. Per example, world share of all Internet Explorer versions according to http://gs.statcounter.com/ is still 2%, not talking about other “exotic” browsers. In China, situation is even worse.

Should you ignore these customers or should you write your code compatible with all your customers’ browsers?

If you choose to support as much customers as possible, jQuery comes to help here. Huge websites are still using jQuery — Booking.com, Amazon, AirBnB, Quora and so does the 90% of the Internet according to Trends.BuiltWith.com.

But, although this library is lightweight, improper usage of it might cause poor performance.

Why performance is important

There are two main reasons:

  • Better performance leads to better user experience. Customers won’t tell you that your website is slow, they’ll just leave.

  • Google takes performance into account for PageRank. Better performance leads to higher search engine ranking.

Convinced? Let’s begin!

1. Stay up to date

Always use the latest jQuery version, newer versions of jQuery contain performance improvements and security updates.

If you are experiencing some incompatibilities upgrading jQuery, you can always use jQuery Migrate plugin as a temporarily solution.

2. Pick right selectors

Every selector perform differently.

From fastest to slowest:

ID selectors:

$('#awesome-element')

Element selectors:

$('form')

Class selectors:

$('.awesome-element')

Pseudo & attribute selectors:

$('[data-attr]'), $(':hidden')

ID and Element selectors are backed by native DOM operations, while pseudo & attribute selectors might cause checking every element in DOM by jQuery.

3. jQuery uses right-to-left selectors engine

And querySelectorAll too.

Which basically means that right side of your selector should be as verbose as possible (e. g. include tag + classname), and the left side as lightweight as possible (classname is enough). Middle part often doesn’t make sense at all and should be avoided if possible.

BAD

$('div.page div.block .element')

GOOD

$('.page div.element')

4. Leverage the power of the context

Following the tip #3:

BAD

$('#container .element')

GOOD

$('#container').find('.element')

Yes, the first one will first find all elements with “element” class and then will filter them out by “container” ID.

Another way to use this benefit is:

$('.element', '#container')

(which is internally is the same thing)

5. Always cache selectors

BAD

var block = $('.block');
var elements = $('.block').find('.element');
var title = $('.block').data('title');

GOOD

var block = $('.block');
var elements = block.find('.element');
var title = block.data('title');

Otherwise selector will be evaluated again and again.

6. Avoid heavy DOM manipulations by detaching it upfront

For example, you need to sort a table. Doing it directly with the part of DOM tree of the document is slow.

It’s much faster to detach it first, perform all needed operations and append it again.

Example:

var elem = $('.element');
var parent = elem.parent();
elem.detach();
/* ... doing heavy operation, like table sort ... */
parent.append(elem);

7. Avoid unnecessary appends

Instead of appending to DOM step-by-step, build HTML string and append once (or even prefer .html() function).

8. Prefer data() over attr()

data() and attr() are relying on data attributes initially (read them from element), but the first one associated data with element while attr() writes data attributes to DOM.

Yet again, DOM operations are slow. Use data() where possible, but remember that associated data updated wouldn’t happen on DOM, which might affect other libraries which are relying on data attributes, not on internal state.

9. Check that element exists before using it

Example:

BAD

$('.element').slideDown();

GOOD

var element = $('.element');
if (element.length) {
    element.slideDown(); // this is a heavy call
}

Why? Because slideDown under the hood calls genFx right away, genFx does various calculations etc. So you are just spending CPU cycles on the element which doesn’t even exist.

10. Avoid using loops

Loops are slow and are involving a lot of checks under the hood. Prefer group queries where possible:

BAD

$('.element').each(function() {
    $(this).something().somethingElse();
});

GOOD

$('.element').something().somethingElse();

That’s it!

jQuery is a great tool for building high-compatibility web application.

Keep performance techniques in mind and keep your customers happy everyday!

When in doubt, you could also refer to jQuery source code:

© 2017 Valerii Iatsko. Personal opinions.
EN | RU