Benchmark: Custom class (single querySelector) vs :has(> :not())

HTML Preparation code:

<button class="button">
  <span class="icon-slot">
  </span>
  No icon
</button>

<button class="button">
  <span class="icon-slot">
    <div class="3p-icon">&nbsp;</div>
  </span>
  3P icon
</button>

<button class="button">
  <span class="icon-slot">
    <i>icon</i>
  </span>
  1P icon
</button>

Tests:

Extra class (one selector)
document.querySelector('.button .icon-slot-custom');
Extra class (two selectors)
document.querySelector('.button .icon-slot-custom, .button .icon-slot-custom i');
Extra class (full example)
document.querySelector('.button .icon-slot-custom, .button .icon-slot-custom i, .button .icon-slot-custom img, .button .icon-slot-custom svg');
Extra class (multiple querySelector)
document.querySelector('.button .icon-slot-custom'); document.querySelector('.button .icon-slot-custom i'); document.querySelector('.button .icon-slot-custom img'); document.querySelector('.button .icon-slot-custom svg');
:has(>:not()) (single)
document.querySelector('.button .icon-slot:has(> :not(i))');
:has(>:not()) (full example)
document.querySelector('.button .icon-slot:has(> :not(i), > :not(img), > :not(svg))');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Extra class (one selector)
Extra class (two selectors)
Extra class (full example)
Extra class (multiple querySelector)
:has(>:not()) (single)
:has(>:not()) (full example)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Browser/OS: Firefox 150 on Linux

View result in a separate tab

Test name	Executions per second
Extra class (one selector)	3343387.2 Ops/sec
Extra class (two selectors)	1277721.8 Ops/sec
Extra class (full example)	900269.6 Ops/sec
Extra class (multiple querySelector)	565428.9 Ops/sec
:has(>:not()) (single)	1793225.8 Ops/sec
:has(>:not()) (full example)	860421.8 Ops/sec

Related benchmarks:

Custom class (single querySelector) vs :has(> :not()) (version: 1)

Comparing performance of: Extra class (one selector) vs Extra class (two selectors) vs Extra class (full example) vs Extra class (multiple querySelector) vs :has(>:not()) (single) vs :has(>:not()) (full example)

Created: 2 months ago by: Guest

Jump to the latest result

Extra class (one selector)

Extra class (two selectors)

Extra class (full example)

Extra class (multiple querySelector)

:has(>:not()) (single)

:has(>:not()) (full example)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A