Benchmark: element matches selector variations

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

Test name	Executions per second
class on target element	15563078.0 Ops/sec
data on target element	14964935.0 Ops/sec
data nested star	10984939.0 Ops/sec
less nested star	11903179.0 Ops/sec
nested without star	11525582.0 Ops/sec
nested selector with tag	4988918.5 Ops/sec
selector all with star data	2808924.0 Ops/sec

Related benchmarks:

element matches selector variations (version: 0)

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

Jump to the latest 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

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A