jQuery which has better performance?

Question

Which would have better performance?

$('input[data-confirm],a[data-confirm],button[data-confirm]');

or

$('[data-confirm]');

Obviously the $('[data-confirm]') version of the selector is more flexible, will it mean jQuery has to scan every single element in the page to see if it has the data-confirm attribute. Would I be better to use a class instead? I like using the data-confirm because I can put this in the value.

<input type="submit" data-confirm="Are you sure you want to do this sir?" />

The performance differences will have a lot to do with your exact HTML and the specific browser. An HTML page that has thousands of HTML elements that are not `input`, `a` or `button` will cause the second option to be slower than one that does not. Putting a class on the desired elements and querying based on that will make the differences between situations a lot less varied. — jfriend00, Sep 13 '12 at 00:41

score 3 · Accepted Answer · answered Sep 13 '12 at 00:27

Why not use a class AND the data-confirm, this will allow you to be specific AND use the data-confirm attribute to precisely target the exact element you want without having jquery look through everything else. This will make sure that regardless of browser your targeting will work faster. You can probably shave off a couple of nanoseconds off again if you use an id rather than a class.

score 1 · Answer 2 · edited May 23 '17 at 12:12

Based on http://www.componenthouse.com/article-19 using the element selector is significantly faster than using the attribute selector on its own (there is a good discussion on selector performance here Good ways to improve jQuery selector performance?).

Personally I would go with the attribute selector first as like you say its more flexible, if your having performance issues you can then review this choice appropriately.

score 1 · Answer 3 · answered Sep 13 '12 at 00:32

1

As @Guffa said, it really depends on the browser. Testing with Chrome 21.0.1180.89, the attribute equals selector is slightly faster:

Here's the jsperf: http://jsperf.com/attrvstag.

answered Sep 13 '12 at 00:32

João Silva

89,303
29
152
158

The main issue I have with this kind of test (despite yielding the favourable result) is that it isn't really taking into account a full array of dom elements. – Michael Zaporozhets Sep 13 '12 at 00:34

score 0 · Answer 4 · answered Sep 13 '12 at 00:29

That depends on what the browser supports. If the selector can be handed off to the browser to be evaluated, either would be fast enough.

If not, the first one will be faster, as there is built in functions to find elements, that can be used by the sizzle engine. For the second one it would have to loop through all elements in the document.

jQuery which has better performance?

4 Answers4