Run results for: Selector Comparisons

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Browser: Chrome 56

Operating system: Mac OS X 10.10.5

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
querySelector (id)	1866402.5 Ops/sec
querySelectorAll (id)	855731.0 Ops/sec
querySelector (class)	188327.2 Ops/sec
querySelectorAll (class)	42616.8 Ops/sec
getElementById	2077393.9 Ops/sec
getElementsByClassName	1974747.5 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)