Benchmark: DataAttribute vs Class Selector vs ID Selector

HTML Preparation code:

<div class="hello" id="hello" data-hello>Hello</div>

Tests:

Class
document.querySelector('.hello');
ID
document.querySelector('#hello');
data attribute
document.querySelector('[data-hello]');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Class
ID
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: 2 days ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/125.0.6422.33 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 125 on iOS 17.5

View result in a separate tab

Test name	Executions per second
Class	7008599.0 Ops/sec
ID	6137374.0 Ops/sec
data attribute	5487391.0 Ops/sec

DataAttribute vs Class Selector vs ID Selector (version: 0)

Comparing performance of: Class vs ID vs data attribute

Created: 7 years ago by: Guest

Jump to the latest result

Class

ID

data attribute

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A