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?

2

2 Answers 2

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 :)

11
  • Yes, but It's not detailed. It has not compared selectors types but only selectors methods.
    – albanx
    Jun 30, 2011 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, 2011 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. Jun 30, 2011 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, 2011 at 10:50
  • 1
    @scones: Thanks, Updated the answer. Nov 15, 2017 at 16:39
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.