How much is the negative affect on performance due to loading and using jQuery?

Question

I do a little bit of third party javascript work for a company where I am able to enter my javascript snippets into the CMS and have it run in the customer facing sites. I have the option to switch on JQuery 1.7.1 in the header of the site and I usually choose to do this or not depending on how much more complicated it would make my code if I didn't.

I have often wondered how much difference it would make if I just turned it on in all cases so even simple things like:

document.getElementById('myElement');

became

$('#myElement');

Where would the 'breakpoint' be in deciding it was better / more efficient / easier to switch on JQuery?

Today's example that made me think of this was as follows (both regular javascript followed by the JQuery equivalent ):

Javascript:

if (document.getElementById('myElement')!== null) {
    var oldText = document.getElementById('myElement').innerHTML,
    newText = oldText.replace(/one/i,'two');
    document.getElementById('myElement').innerHTML = newText;
}

jQuery:

if ($('#myElement').length !== 0) {
    var oldText = $('#myElement').html(),
    newText = oldText.replace('one','two');
    $('#myElement').html(newText);
}

And How much is the negative affect on forcing the clients to download jQuery?

Answer 1

The difference will be minimal, and not worth writing those 10 chars...

As always, remember that as a developer, your time is typically the most valuable resource. Do not focus on optimization of selector speed unless it is clear that performance needs to be improved.

jQuery site

And of course jQuery has a lot more features than id selectors...

---

A good advise is to cache the queried elements and not query them multiple times, but it's true both with jQuery and with vanilla javascript;

From:

document.getElementBy('id').value = "foo";
document.getElementBy('id').parentNode.className = "parent";

To:

var element = document.getElementBy('id')
element.value = "foo";
element.parentNode.className = "parent"

or jQuery version:

var $element = $('#id');
$element.val("foo");
$element.parent().addClass("parent");

Due to jQuery "chainabilty" - cascading styile, you do that with one "chain":

$('#id').val("foo").parent().addClass("parent");

---

This jsperf shows that $('#id') is 3-6 slower than document.getElementById
Which means you can have "only" 1,000,000 those operations per second... "A disaster"!

"We should forget about small efficiencies, say about 97% of the time: premature  optimization is the root of all evil"

---

Regarding to the "loading"- downloading time of the jQuery library.

• The current minified version of jQuery (1.7.2) size is only 32K, which is almost for sure smaller than most of images in your website, so it's negligible.
• You can use google global cached copy of jQuery, read more about it in this long blog post.

No matter how well optimized your site is, if you’re hosting jQuery locally then your users must download it at least once. Each of your users probably already has dozens of identical copies of jQuery in their browser’s cache, but those copies of jQuery are ignored when they visit your site.

However, when a browser sees references to CDN-hosted copies of jQuery, it understands that all of those references do refer to the exact same file. With all of these CDN references point to exactly the same URLs, the browser can trust that those files truly are identical and won't waste time re-requesting the file if it's already cached. Thus, the browser is able to use a single copy that's cached on-disk, regardless of which site the CDN references appear on.

Answer 2

Your plain JS could be a lot more efficient itself without adding jQuery:

var obj = document.getElementById('myElement');
if (obj) {
    obj.innerHTML = obj.innerHTML.replace(/one/i,'two');
}

Anytime you're repeating the same selector operation multiple times within the same function you should generally cache it into a local variable and you have no need for either of your other temporary variables here.

FYI, if you want a shortcut for getElementById(), you can define your own very easily without including a whole library just for that.

window.$ = function(id) {
    return(document.getElementById(id));
}

There are also much, much smaller libraries than jQuery that gives you basic selector operations. jQuery itself uses the Sizzle library which is often what I use when I just want selector operations.

I'm not arguing against jQuery if you use/need many of the things that it offers. It's particularly useful for ajax and many DOM manipulation functions. But, if your needs are simple, there are often more efficient ways of doing things than including all of jQuery if site efficiency/speed/size is important.