jQuery selector vs hasClass (v38)

Revision 38 of this benchmark created by constablebrew on

Description

Test which is faster, a selector including the class compared to hasClass.

Preparation HTML

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>
<div class="foo"></div>
<div class="foobar"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
selector
$("div.foobar").each(function(){
 found = true;
});
ready
hasClass
$("div").each(function(){
  if($(this).hasClass("foobar")) {
   found = true;
  }
})
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.