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

Run details:

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Mobile/15E148 Safari/604.1

Browser: Mobile Safari 15

Operating system: iOS 15.2

Device Platform: Mobile

Date tested: 2 years ago

Test name	Executions per second
jQuery Repeated selectors	31631.0 Ops/sec
Vanilla JS Variable Selectors with variables	56795.6 Ops/sec
jQuery Repeated Selectors + Find	22215.3 Ops/sec
Vanilla JS Selectors with variables + querySelector	54601.1 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