Benchmark: jQuery selectors efficiency on repeated use - v2

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'); })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery Repeated selectors
Vanilla JS Variable Selectors with variables
jQuery Repeated Selectors + Find
Vanilla JS Selectors with variables + querySelector

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Related benchmarks:

jQuery selectors efficiency on repeated use - v2 (version: 1)

Comparing performance of: jQuery Repeated selectors vs Vanilla JS Variable Selectors with variables vs jQuery Repeated Selectors + Find vs Vanilla JS Selectors with variables + querySelector

Created: 4 years ago by: Registered User

Jump to the latest result

jQuery Repeated selectors

Vanilla JS Variable Selectors with variables

jQuery Repeated Selectors + Find

Vanilla JS Selectors with variables + querySelector

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):