30

I want just to ask for an opinion of perfomance: Is it faster selecting elements by class name or by attribute name with jquery? Example I have 100 DIVs element in this form:

<div class="normal_box" normal_box=1>...</div>

Which is faster:

$('div.normal_box').each(function(){...});

VS

$('div[normal_box=1]').each(function(){...});

I made some experiments on 30 divs but I don't see any difference with (new Date).getTime(); Maybe selecting by class is more efficient on CPU usage?

LeftyX
  • 35,328
  • 21
  • 132
  • 193
albanx
  • 6,193
  • 9
  • 67
  • 97
  • 4
    See the answers to this question: http://stackoverflow.com/questions/6460644/in-jquery-is-selecting-by-class-or-id-faster-than-selecting-by-some-other-attrib – James Allardice Jun 30 '11 at 10:21
  • Yeah, But Mohammed below answer is more correct, because he is the only who make test on attribute selectors – albanx Jun 30 '11 at 10:54

2 Answers2

30

this is a great post for exactly what you are looking for.

JQUERY SELECTOR PERFORMANCE TESTING

I've also found a great article that may help you on this topic:

let me know if this answer really helped you, thanks.

update: I've managed to make a sample to match your posted case, here are the results for a total set of 203 divs:

1- by using tag name having certine class name $("div.normal_box") ==> 884 ms

2- by using attribute value $("div[normal_box=1]") ==> 4553 ms

Update 2: I tried even further more than your question, and made it to test a few selectors, here is the new link for this updated test: http://jsfiddle.net/8Knxk/4/

3- by using tag name $("div") ==> 666 ms

4- by using just the class name $(".normal_box") ==> 762 ms

I think it's now more clear for you :)

Mohammed Swillam
  • 9,119
  • 4
  • 36
  • 47
  • Yes, but It's not detailed. It has not compared selectors types but only selectors methods. – albanx Jun 30 '11 at 10:27
  • Thank you Mohammed, I have seen this post, I know that selecting by id is much faster that selecting by attribute. What I was searching for is if selection by CLASS is or not faster than selecting by attribute. – albanx Jun 30 '11 at 10:33
  • 1
    Kindly check my updated answer: I'v made a test for your exact case, and updated my answer with the test results. – Mohammed Swillam Jun 30 '11 at 10:44
  • THANK you Mohammed you definitely asked my answer. You can make a blog grupping all in one all possible tests. You're really great and polity. Have a look at my web site www.albanx.com maybe you find something usefull(look at home and programming page). Thank you again – albanx Jun 30 '11 at 10:50
  • really appreciate your kind words. :) – Mohammed Swillam Jun 30 '11 at 11:17
  • My edit adding that _actually_ selecting by attribute _name_ (as opposed to its _value_ like in the current answer) is almost as fast as selecting by attribute was rejected for changing the intent of the post. That I don't understand - since this answer does not actually aswer the question. It comes close, but misses on a technical detail. The real answer is that the difference between `$("div[normal_box]")` and `$("div.normal_box")` is minimal. – TwoD Oct 03 '14 at 13:48
  • In case anyone complains about the removal of the value check because it's there in the question: If you didn't, you'd be comparing apples and oranges. Adding a value to the attribute and selecting that is much more fine grained compared to selecting by classes, just having the attribute there (with or without a value) and selecting by its name alone speeds up the process and matches what is done when selecting by class. – TwoD Oct 03 '14 at 13:58
  • Third link is dead by now – scones Oct 23 '17 at 15:24
  • 1
    @scones: Thanks, Updated the answer. – Mohammed Swillam Nov 15 '17 at 16:39
  • Something odd is going on here though: if I run @MohammedSwillam jsfiddle, I get vastly different times the first time (~5x slower for attribute selection that class), but the next and subsequent times, the difference is negligible: jQuery Selector Performance: Context vs No Context $("div") 812 ms $(".normal_box") 825 ms $("div.normal_box") 1104 ms $("div[normal_box=1]") 1135 ms – bubba Oct 22 '18 at 22:13
  • @bubba: Thanks for your observation. kindly note that you are now running this code on the current browser engine that should be vastly optimized in comparison to what was available on 2011 + your current PC hardware, which is also way faster than 2011 mainstream specs. – Mohammed Swillam Nov 20 '18 at 09:54
14

Here is are the results of a test I just ran for myself. This div was on a DOM with 1562 elements.

<div class="banana" data-banana="1"></div>

Tests

    function test(iterations) {

    console.time('query-by-data');
    for(var i=iterations;i;i--) {
        $('[data-banana]');
    }
    console.timeEnd('query-by-data');

    console.time('query-by-class');
    for(var i=iterations;i;i--) {
        $('.banana');
    }
    console.timeEnd('query-by-class');

}

results

 iterations: 1000
 query-by-data: 120.000ms
 query-by-class: 10.000ms

 iterations: 10000
 query-by-data: 1030.000ms
 query-by-class: 56.000ms

 iterations: 50000
 query-by-data: 5151.000ms
 query-by-class: 235.000ms
Walter Stabosz
  • 7,447
  • 5
  • 43
  • 75