Run results for: Selector Comparisons

Run details:

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Browser: Firefox 66

Operating system: Windows 7

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
querySelector (id)	795417.8 Ops/sec
querySelectorAll (id)	323647.3 Ops/sec
querySelector (class)	813353.6 Ops/sec
querySelectorAll (class)	277111.2 Ops/sec
getElementById	1090017.2 Ops/sec
getElementsByClassName	1613845.5 Ops/sec
jQuery (id)	669378.8 Ops/sec
jQuery (class)	128294.7 Ops/sec
Custom (id)	946921.4 Ops/sec
Custom (class)	1107357.8 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)