jQuery class vs attribute selectors (v5)

Revision 5 of this benchmark created on

Description

Test performance of jQuery of using the class selector ".classname" vs the attribute selector "[class='classname']"

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div>
<div class="unusedDiv">
  <div class="sub-unusedDiv">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="unusedDiv2 nothing3">
  <div class="nothing1 sub-unusedDiv nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="nothing nothing2 nothing3">
  <div class="nothing1 sub-nothing nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="unusedDiv">
  <div class="sub-unusedDiv">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="unusedDiv2 nothing3">
  <div class="nothing1 sub-unusedDiv nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="nothing nothing2 nothing3">
  <div class="nothing1 nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div>
<div>
<div class="unusedDiv">
  <div class="sub-unusedDiv">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="unusedDiv2 nothing3">
  <div class="nothing1 sub-unusedDiv nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="nothing nothing2 nothing3">
  <div class="nothing1 sub-nothing nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="unusedDiv">
  <div class="sub-unusedDiv">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="unusedDiv2 nothing3">
  <div class="nothing1 sub-unusedDiv nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div data-class="content" class="nothing nothing2 content nothing3">
  <div class="nothing1 sub-content nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div>
<div>
<div class="unusedDiv">
  <div class="sub-unusedDiv">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="unusedDiv2 nothing3">
  <div class="nothing1 sub-unusedDiv nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="nothing nothing2 nothing3">
  <div class="nothing1 sub-nothing nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="unusedDiv">
  <div class="sub-unusedDiv">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div class="unusedDiv2 nothing3">
  <div class="nothing1 sub-unusedDiv nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div data-class="content" class="nothing nothing2 content nothing3">
  <div class="nothing1 sub-content nothing3">
    <span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>
<div>

Test runner

Ready to run.

Testing in
TestOps/sec
class selector
var content = jQuery('.content');
ready
attribute selector
var content = jQuery('[class="content"]');
ready
attribute contains selector
var content = jQuery('[class*="content"]');
ready
attribute contains word
var content = jQuery('[class~="content"]');
ready
attribute not equal selector
var content = jQuery('[class!="content"]');
ready
attribute selector (data attribute)
var content = jQuery('[data-class="content"]');
ready

Revisions

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