MeasureThat.net

 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: 3 years ago by: Registered User
Jump to the latest result
HTML Preparation code:
AخA
 
1
<ul class="list">
2
  <li class="item">
3
    <ul class="sublist">
4
      <li class="subitem">Item</li>
5
    </ul>
6
  </li>
7
  <li class="item">
8
    <ul class="sublist">
9
      <li class="subitem">Item</li>
10
    </ul>
11
  </li>
12
  <li class="item">
13
    <ul class="sublist">
14
      <li class="subitem">Item</li>
15
    </ul>
16
  </li>
17
  <li class="item">
18
    <ul class="sublist">
19
      <li class="subitem">Item</li>
20
    </ul>
21
  </li>
22
  <li class="item">
23
    <ul class="sublist">
24
      <li class="subitem">Item</li>
25
    </ul>
26
  </li>
27
  <li class="item">
28
    <ul class="sublist">
29
      <li class="subitem">Item</li>
30
    </ul>
31
  </li><li class="item">
32
    <ul class="sublist">
33
      <li class="subitem">Item</li>
34
    </ul>
35
  </li>
36
  <li class="item">
37
    <ul class="sublist">
38
      <li class="subitem">Item</li>
39
    </ul>
40
  </li>
41
  <li class="item">
42
    <ul class="sublist">
43
      <li class="subitem">Item</li>
44
    </ul>
45
  </li>
46
  <li class="item">
47
    <ul class="sublist">
48
      <li class="subitem">Item</li>
49
    </ul>
50
  </li>
51
</ul>
52
<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

    ​x
     
    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

Experimental features:

  • 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: 3 years ago)
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
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
LLMs can make mistakes. Check important info.
Related benchmarks: