Run results for: jQuery selectors efficiency on repeated use - v2

Run details:

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

Browser: Chrome 96

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
jQuery Repeated selectors	5847.9 Ops/sec
Vanilla JS Variable Selectors with variables	8281.9 Ops/sec
jQuery Repeated Selectors + Find	4031.4 Ops/sec
Vanilla JS Selectors with variables + querySelector	6644.4 Ops/sec

HTML Preparation code:

<ul class="list">
  <li class="item">
    <ul class="sublist">
      <li class="subitem">Item</li>
    </ul>
  </li>
  <li class="item">
    <ul class="sublist">
      <li class="subitem">Item</li>
    </ul>
  </li>
  <li class="item">
    <ul class="sublist">
      <li class="subitem">Item</li>
    </ul>
  </li>
  <li class="item">
    <ul class="sublist">
      <li class="subitem">Item</li>
    </ul>
  </li>
  <li class="item">
    <ul class="sublist">
      <li class="subitem">Item</li>
    </ul>
  </li>
  <li class="item">
    <ul class="sublist">
      <li class="subitem">Item</li>
    </ul>
  </li><li class="item">
    <ul class="sublist">
      <li class="subitem">Item</li>
    </ul>
  </li>
  <li class="item">
    <ul class="sublist">
      <li class="subitem">Item</li>
    </ul>
  </li>
  <li class="item">
    <ul class="sublist">
      <li class="subitem">Item</li>
    </ul>
  </li>
  <li class="item">
    <ul class="sublist">
      <li class="subitem">Item</li>
    </ul>
  </li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>

Tests:

jQuery Repeated selectors
$('.list').attr('aria-expanded', 'true'); $('.list').attr('aria-expanded', 'false'); $('.list').attr('aria-expanded', ''); $('.item').attr('aria-expanded', 'true'); $('.item').attr('aria-expanded', 'false'); $('.item').attr('aria-expanded', ''); $('.list').attr('aria-expanded', 'true'); $('.list').attr('aria-expanded', 'false'); $('.list').attr('aria-expanded', ''); $('.item').attr('aria-expanded', 'true'); $('.item').attr('aria-expanded', 'false'); $('.item').attr('aria-expanded', ''); $('.item').each(function() { console.log($(this)); })
Vanilla JS Variable Selectors with variables
var list = document.querySelectorAll('.list'); var item = document.querySelectorAll('.item'); list.forEach(function(element) { element.setAttribute('aria-expanded', 'true'); }) list.forEach(function(element) { element.setAttribute('aria-expanded', 'false'); }) list.forEach(function(element) { element.setAttribute('aria-expanded', ''); }) item.forEach(function(element) { element.setAttribute('aria-expanded', 'true'); }) item.forEach(function(element) { element.setAttribute('aria-expanded', 'false'); }) item.forEach(function(element) { element.setAttribute('aria-expanded', ''); }) list.forEach(function(element) { element.setAttribute('aria-expanded', 'true'); }) list.forEach(function(element) { element.setAttribute('aria-expanded', 'false'); }) list.forEach(function(element) { element.setAttribute('aria-expanded', ''); }) item.forEach(function(element) { element.setAttribute('aria-expanded', 'true'); }) item.forEach(function(element) { element.setAttribute('aria-expanded', 'false'); }) item.forEach(function(element) { element.setAttribute('aria-expanded', ''); }) item.forEach(function(element) { console.log(element); })
jQuery Repeated Selectors + Find
$('.list').attr('aria-expanded', 'true'); $('.list').attr('aria-expanded', 'false'); $('.list').attr('aria-expanded', ''); $('.item').attr('aria-expanded', 'true'); $('.item').attr('aria-expanded', 'false'); $('.item').attr('aria-expanded', ''); $('.list').attr('aria-expanded', 'true'); $('.list').attr('aria-expanded', 'false'); $('.list').attr('aria-expanded', ''); $('.item').attr('aria-expanded', 'true'); $('.item').attr('aria-expanded', 'false'); $('.item').attr('aria-expanded', ''); $('.item').each(function() { console.log($(this)); $(this).find('.sublist'); $(this).find('.subitem'); })
Vanilla JS Selectors with variables + querySelector
var list = document.querySelectorAll('.list'); var item = document.querySelectorAll('.item'); list.forEach(function(element) { element.setAttribute('aria-expanded', 'true'); }) list.forEach(function(element) { element.setAttribute('aria-expanded', 'false'); }) list.forEach(function(element) { element.setAttribute('aria-expanded', ''); }) item.forEach(function(element) { element.setAttribute('aria-expanded', 'true'); }) item.forEach(function(element) { element.setAttribute('aria-expanded', 'false'); }) item.forEach(function(element) { element.setAttribute('aria-expanded', ''); }) list.forEach(function(element) { element.setAttribute('aria-expanded', 'true'); }) list.forEach(function(element) { element.setAttribute('aria-expanded', 'false'); }) list.forEach(function(element) { element.setAttribute('aria-expanded', ''); }) item.forEach(function(element) { element.setAttribute('aria-expanded', 'true'); }) item.forEach(function(element) { element.setAttribute('aria-expanded', 'false'); }) item.forEach(function(element) { element.setAttribute('aria-expanded', ''); }) item.forEach(function(element) { console.log(element); element.querySelector('.sublist'); element.querySelector('.subitem'); })

Run results for: jQuery selectors efficiency on repeated use - v2

jQuery Repeated selectors

Vanilla JS Variable Selectors with variables

jQuery Repeated Selectors + Find

Vanilla JS Selectors with variables + querySelector