Better JQuery performance syntax?

Question

Is there any performance difference implication for the 2 syntax below?

$(“span.foo”)
$(“.foo”)

Someone told me the first one would merely search span whose class is foo while the second would search among all elements.

Well, of course they select different things. That's how CSS selectors work. The performance difference is irrelevant. Use the one that selects the elements you need. — , May 29 '13 at 03:03
http://stackoverflow.com/questions/11698935/jquery-elementclass-selector-performance — PSL, May 29 '13 at 03:05
It's semi-irrelevant, unless it is perceived by the user. Hopefully you'll never have [25,333](http://jsfiddle.net/Af4mM/) lines of varied class and element markup to go through. — SomeShinyObject, May 29 '13 at 03:14
They're doing different things. Trying to compare them for performance isn't meaningful. Apples to oranges, etc. — user229044, May 29 '13 at 03:21
@ChristopherW: I meant that since the selectors have different meaning, the performance difference doesn't matter so much as using the proper selector to fetch the correct elements. That said, if performance is really a concern, the first thing to do is to eliminate abstractions. — , May 29 '13 at 03:36

score 3 · Answer 1 · answered May 29 '13 at 03:18

If you are looking for a performance related issue, it is always better to benchmark the different solutions to see which one is better.

They both may have different results bases on the markup.

But if you have only span's with the class foo then the second one will be faster.
_{The reason could be in the first case it will first load all span's in the document then filter them with the class foo while the second one will you the native getElementsByClassname to fetch the elements.}

Have a look at this jsperf benchmark

score 1 · Answer 2 · answered May 29 '13 at 03:35

Who ever told you that is correct.

Looks like it is about a half a second(Firefox, Chrome is less than that) when selecting on two elements over 100,000 iterations.

http://jsfiddle.net/83qcy/

var start, end, i;

start = new Date();
for(i = 0; i < 100000; i++){
    $("span.foo");
}
end = new Date();
$("span.foo").html(end - start);

start = new Date();
for(i = 0; i < 100000; i++){
    $(".foo");
}
end = new Date();
$("div.foo").html(end - start);

I'm sure you can imaging that selecting on a larger amount of elements would certainly take longer. You likely won't select 100,000 times either, but as websites get larger javascript performance can be one of the largest factors, jQuery's context and selectors can make that much more efficient.

Also, you may be selecting elements that you don't want if you only want to apply functions to spans with a class of "foo"

Better JQuery performance syntax?

2 Answers2