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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one month 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	15563080.0 Ops/sec
data on target element	14964940.0 Ops/sec
data nested star	10984940.0 Ops/sec
less nested star	11903180.0 Ops/sec
nested without star	11525580.0 Ops/sec
nested selector with tag	4988919.0 Ops/sec
selector all with star data	2808924.0 Ops/sec

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: one month 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>

Experimental features:

Fastest: N/A

Slowest: N/A