Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
class vs. data attribute selectors
(version: 1)
Comparing performance of:
class vs data attribute (with value) vs data attribute (boolean)
Created:
3 months ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<span class="tag is-small">Hello</span> <span class="tag" data-size="small">Hello</span> <span class="tag" data-small>Hello</span>
Tests:
class
document.querySelector('.tag.is-small');
data attribute (with value)
document.querySelector('.tag[data-size="small"]');
data attribute (boolean)
document.querySelector('.tag[data-small]');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
class
data attribute (with value)
data attribute (boolean)
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
3 months ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:147.0) Gecko/20100101 Firefox/147.0
Browser/OS:
Firefox 147 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
class
5825010.5 Ops/sec
data attribute (with value)
4953979.5 Ops/sec
data attribute (boolean)
5073194.5 Ops/sec
Related benchmarks:
Class Selector vs ID Selector vs Data Attribute Selector Performance Test
DataAttribute vs Class Selector vs ID Selector vs AttributeSelector
Attribute vs Class Selector vs ID Selector
DataAttribute vs Class Selector vs ID Selectorssssss
DataAttribute vs Class Selector vs ID Selector v2
DataAttribute vs Class Selector vs ID Selector vs ~=
DataAttribute vs Class Selector vs ID Selector vs Class & Data Attribute Selector
dataAttribute vs attribute vs Class Selector vs ID Selector
DataAttribute vs Class Selector vs ID Selector vs Tag vs :is()
Comments
Confirm delete:
Do you really want to delete benchmark?