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: 14 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Browser/OS: Chrome 147 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Extra class (one selector)	47250568.0 Ops/sec
Extra class (two selectors)	2813438.0 Ops/sec
Extra class (full example)	1645786.5 Ops/sec
Extra class (multiple querySelector)	2830238.5 Ops/sec
:has(>:not()) (single)	7129071.5 Ops/sec
:has(>:not()) (full example)	5593533.5 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: 14 days 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