Run results for: Selector Comparisons

Run details:

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36

Browser: Chrome 73

Operating system: Windows 7

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
querySelector (id)	423528.2 Ops/sec
querySelectorAll (id)	199227.4 Ops/sec
querySelector (class)	484108.2 Ops/sec
querySelectorAll (class)	177192.0 Ops/sec
getElementById	627490.2 Ops/sec
getElementsByClassName	726905.5 Ops/sec
jQuery (id)	371737.8 Ops/sec
jQuery (class)	92693.4 Ops/sec
Custom (id)	765958.6 Ops/sec
Custom (class)	761744.6 Ops/sec

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<div>
  <ul>
    <li>
      <a href="#" name="name" class="classname">item 1</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 2</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 3</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 4</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 5</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 6</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 7</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 8</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 9</a>
    </li>
    <li id="last">
      <a href="#" name="name" class="classname">item 10</a>
    </li>
  </ul>
</div>

Script Preparation code:

var nodes;
function getByClassOrId(selector) {
	if (selector[0] == '.')
      return document.getElementsByClassName(selector);
  	else if (selector[0] == '#')
      return document.getElementById(selector);
  	else
      return null;
}

Tests:

querySelector (id)
nodes = document.querySelector('#last');
querySelectorAll (id)
nodes = document.querySelectorAll('#last');
querySelector (class)
nodes = document.querySelector('.classname');
querySelectorAll (class)
nodes = document.querySelectorAll('.classname');
getElementById
nodes = document.getElementById('last');
getElementsByClassName
nodes = document.getElementsByClassName('classname');
jQuery (id)
nodes = $('#last');
jQuery (class)
nodes = $('.classname');
Custom (id)
nodes = getByClassOrId('#last');
Custom (class)
nodes = getByClassOrId('.classname');

Run results for: Selector Comparisons

Various JS Selector Comparisons

querySelector (id)

querySelectorAll (id)

querySelector (class)

querySelectorAll (class)

getElementById

getElementsByClassName

jQuery (id)

jQuery (class)

Custom (id)

Custom (class)