jQuery class vs attribute selectors (v9)

Revision 9 of this benchmark created by Tim on

Description

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

Preparation HTML

<div class="nothing nothing2 content nothing3" content>
  <div class="nothing1 sub-content nothing3" content>
    Lorem ipsum dolor sit amet.
  </div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
class selector
var content = document.querySelectorAll('.content');
ready
attribute selector
var content = document.querySelectorAll('[class="content"]');
ready
attribute contains selector
var content = document.querySelectorAll('[class*="content"]');
ready
attribute contains word
var content = document.querySelectorAll('[class~="content"]');
ready
attribute not equal selector
var content = document.querySelectorAll('[class!="content"]');
ready
attribute only
var content = document.querySelectorAll('[content]');
ready
by class name
var content = document.getElementsByClassName('content')
ready

Revisions

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