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:

Run details: (Test run date: 2 years ago)

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/OS: Mobile Safari 15 on iOS 15.2

View result in a separate tab

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

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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: 2 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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