Benchmark: element matches selector variations

element matches selector variations (version: 0) Benchmark.js

Testing element query and matches against various nesting and selector patterns

Comparing performance of: `class on target element vs data on target element vs data nested star vs less nested star vs nested without star vs nested selector with tag vs selector all with star data`

Created: 2 years ago by: Registered User

Go to the latest result

HTML Preparation code:

<main data-bench-element="container"><article data-bench-ignore="true"><hgroup class="attribution"><h1 class="title">Title</h1><h2 data-bench-ignore="true">Subtitle</h2></hgroup></article></main>

Script Preparation code:

var h1 = document.querySelector('h1');
var h2 = document.querySelector('h2');
var article = document.querySelector('article');
var hgroup = document.querySelector('hgroup');

Tests:

class on target element
h1.matches('.title');
data on target element
h2.matches('*[data-bench-ignore]');
data nested star
h1.matches('*[data-bench-ignore], *[data-bench-ignore] *');
less nested star
hgroup.matches('*[data-bench-ignore], *[data-bench-ignore] *');
nested without star
h1.matches('article[data-bench-ignore] h1');
nested selector with tag
document.querySelector('article[data-bench-ignore] h1');
selector all with star data
document.querySelector('*[data-bench-ignore] *');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
class on target element
data on target element
data nested star
less nested star
nested without star
nested selector with tag
selector all with star data

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

class on target element

15.6M/s

data on target element

15.0M/s

less nested star

11.9M/s

nested without star

11.5M/s

data nested star

11.0M/s

nested selector with tag

5.0M/s

selector all with star data

2.8M/s

View exact numbers

Test name	Executions per second
✓ class on target element	15,563,078 Ops/sec
data on target element	14,964,935 Ops/sec
less nested star	11,903,179 Ops/sec
nested without star	11,525,582 Ops/sec
data nested star	10,984,939 Ops/sec
nested selector with tag	4,988,918 Ops/sec
selector all with star data	2,808,924 Ops/sec