Benchmark: Class Selector vs ID Selector vs Extended Data Attribute Selector Performance Test

HTML Preparation code:

<div class="hello" id="hello" data-some-long-long-attr="some long long long long value" data-test="hello-and-bye">Hello</div>

Tests:

Class
document.querySelector('.hello');
ID
document.querySelector('#hello');
Extended Data Attribute
document.querySelector('[data-some-long-long-attr]')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Class
ID
Extended Data Attribute

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 year ago)

User agent: Mozilla/5.0 (Linux; Android 11; TECNO BD2d) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.104 Mobile Safari/537.36 OPR/67.1.3508.63168

Browser/OS: Opera Mobile 67 on Android

View result in a separate tab

Test name	Executions per second
Class	143312.9 Ops/sec
ID	124399.1 Ops/sec
Extended Data Attribute	112045.6 Ops/sec

Class Selector vs ID Selector vs Extended Data Attribute Selector Performance Test (version: 0)

Class Selector vs ID Selector vs Extended Data Attribute Selector Performance Test

Comparing performance of: Class vs ID vs Extended Data Attribute

Created: one year ago by: Guest

Jump to the latest result

Class

ID

Extended Data Attribute

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A