Benchmark: Custom class 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
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())
document.querySelector('.button .icon-slot:has(> :not(i), > :not(img), > :not(svg))');
Multiple :has(:not())
document.querySelector('.button .icon-slot:has(> :not(i))'); document.querySelector('.button .icon-slot:has(> :not(img))'); document.querySelector('.button .icon-slot:has(> :not(svg))');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Extra class
:has(>:not())
Multiple :has(:not())

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	2990799.8 Ops/sec
:has(>:not())	5491183.5 Ops/sec
Multiple :has(:not())	2408858.2 Ops/sec

Related benchmarks:

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

Comparing performance of: Extra class vs :has(>:not()) vs Multiple :has(:not())

Created: 14 days ago by: Guest

Jump to the latest result

Extra class

:has(>:not())

Multiple :has(:not())

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A