What is the performance impact of having jquery functions not used?

Question

I posted another question on a very similar topic, but turned out to be a little subjective. I am able to divided the question in two questions, one that I will explain below:

In the following Code:

<script type="text/javascript">
$(function() 
{
   $("#accordion").accordion();
   $("#datepicker").datepicker();
   $("#button").click(function() 
   {
     runEffect();
     return false;
   });
});
</script>

Question: If I have this code called in a 1,000 pages, but only 250 pages have a datepicker id. Will the browser spend extra time on the other 750 pages trying to parse for id datepicker, or Jquery has a smart way of solving this situation without affecting performance?

What happen if the code is making reference to ids or classes that does not exist on the html markup of the current page, will that impact performance?

Answer 1

It will look for such an element, and, since there aren't any, it won't do anything.

jQuery's selector library is highly optimized for performance, so I wouldn't worry about it.

In particular, a simple #id selector is turned into a call to the browser's native getElementById, which can be assumed to be quite fast.

If you're really concerned, measure it in different browsers.

Answer 2

The code will be called on every single page load and the execution would go something like this:

• $("#accordion").accordion()
  1. Find matching elements:
     1. "#accordion" ID lookup is very fast
  2. Apply function to all matching elements:
     • if there was no #accordion element, then it's going to return virtually instantly without doing anything

You'd only want to worry about it in two cases, IMO:

1. You have a very complex selector.
2. You are calling a lot of functions on the element.

In case 2, which is much more common, I work around it by doing this:

$el = $('#myElement');
if ($el.length) {
    $el
        .find("div")
        .each(function () { .. })
        .parents()
    // etc...
}

I've just put together a benchmark to test how much effect this actually has. You can see the results and the code if you like:

In short:

// doing this:
var $f = $('#fakeElement');
if ($f.length) $f.find('div');

// is almost twice as fast as this:
$('#fakeElement').find('div');

// For 10000 iterations, 404ms vs 788ms in my tests

Answer 3

Yes, technically jquery will spend some amount of time looking for an element with an id of 'datepicker'.

However, since you're selecting by and ID, and you're only doing it once per page, the time it takes is probably so small that you can't even reliably measure it.

Now, you might want to worry about this if this code were somehow buried inside a loop and was going to get executed with insane frequency. But that doesn't look the case.

This is small stuff, don't sweat it. I'm sure if you look hard enough, you can find a dozen optimizations that will pay off much better than worrying about this.

Answer 4

Since jQuery is stateless it will have to look this up. You could limit the impact by setting the element in a variable and then whenever you need this, you look at what you saved in the javascript code, and just use that.

Optimizations like this can help with any performance concerns, though, as SLaks mentioned, this call is very fast, but, you can time it on different browsers, and see if you want to speed it up.

Answer 5

For those saying "don't worry about it" I couldn't disagree more.

I built a site like this once where the external JS file had:

$(function() {
  // do lots and lots of stuff
});

with no Javascript internally on the HTML (PHP) page. It was a performance disaster and that was with relatively efficient selector choice, meaning never:

$(".someClass").doStuff();

Instead:

$("div.someClass").doStuff();

and so on. It took about a second to execute all the Javascript even though 95% of it was doing nothing. My advice? If you want a highly responsive Web site don't do it this way.

Instead put functions like this in your external JS:

function activate_accordion() {
  $("#accordion").accordion();
}

This is of course a simple example. But the point is this: no Javascript should be automatically executed in your external Javascript file unless the vast majority of pages use it. Your external Javascript file should just be a collection of functionality that is called where necessary on individual pages.

and then on each page inside the HTML put:

<script type="text/javascript">
$(function() {
  activate_accordion();
}
</script>

so you only execute the Javascript you are actually using. Yes this is slightly more work because you have to be aware of what each page is doing/using but doing it globally can quickly get out of hand.

I reduce the Javascript execution times to 50-100ms (from 1-2 seconds) this way.

Answer 6

If you have a large chunk of code that is dependent on the existence of an element, you can always conditionally execute it:

if( $('#accordion').length > 0 ){
     // 20 lines of #accordion-dependent code here
}

Answer 7

Why not mix in a native call?

Each of the following ran for 10,000 iterations.

$('div#datepicker');
// 179ms

$('#datepicker').find('div');
// 65ms

var $dp = $('#datepicker'); if ($dp.length) $dp.find('div');
// 32ms

if (document.getElementById('datepicker')) $('#datepicker').find('div');
// 1ms